页面缩放规律的探究
1、文字在瀏覽器縮放導(dǎo)致空間不夠時(shí)候的規(guī)律
?
<div class="content"><h1>文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試</h1></div>*{margin: 0;padding: 0;}.content{background-color: #eee;}?
因?yàn)槭莇iv，所以肯定是沾滿屏幕的
?
壓縮瀏覽器
1、文字部分寬度還夠的時(shí)候，只是多出來的背景沒有了而已
?
2、空間不夠，文字自動(dòng)換行，且不會(huì)出現(xiàn)滑動(dòng)條，差不多就是自適應(yīng)了
?
3、最后壓不下去了，不知道最小寬度是怎么定義的，反正剛好顯示4個(gè)子
?
單獨(dú)兩個(gè)字也是這樣就壓縮不下去了
?
別的網(wǎng)站或許會(huì)產(chǎn)生滑動(dòng)條，但是最小的視口也是這么大
?
?
二、僅有元素
*{margin: 0;padding: 0;}.content{background-color: #eee;}.text{width: 100%;height: 100px;}<body><div class="content"><h1>測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字</h1><div class="text"></div></div> </body>?
正常頁面
壓縮頁面
因?yàn)槭?00%寬度，定高，所以壓縮頁面，不會(huì)有影響，也不會(huì)有滑動(dòng)條
?
如果是定寬呢？
頂寬如果視口不夠大的話，肯定會(huì)有滑動(dòng)條，且父元素的背景，只會(huì)渲染父元素的寬度+子元素高度。
?
?
?三、元素+文字
.text{width: 100%;height: 100px;}<body><div class="content"><h1>測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字</h1><div class="text">測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字</div></div> </body>?
正常情況下
壓縮情況下
元素寬度是100%，所以會(huì)自適應(yīng)
文字也會(huì)自適應(yīng)的進(jìn)行換行，在填滿視口寬度的基礎(chǔ)上。
因?yàn)楦冈囟ǜ?#xff0c;所以文字會(huì)超出。
不設(shè)置高度就好了，父元素會(huì)被子元素?fù)伍_
?
?
?
結(jié)論
正常情況下，文字會(huì)自適應(yīng)換行。
元素及里面的文字，也會(huì)自適應(yīng)的。
他們不會(huì)在寬度上將頁面撐開。
?
如果有固定寬度的元素，他父元素會(huì)根據(jù)頁面寬度自適應(yīng)，他自己突出一部分，然后撐開頁面寬度。
?
瀏覽器的最小視口是固定的，如果元素大于這個(gè)最小視口了，就會(huì)有滑動(dòng)條
?
小于就沒事咯
?
轉(zhuǎn)載于:https://www.cnblogs.com/weizhibin1996/p/9692327.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
- 上一篇： 法官老爷爷在20年的一次判决，竟然彻底改
- 下一篇： spring aop代码的增强