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