首頁猿問在制作頁面時(shí)，寬度和高度用百分比還...

在制作頁面時(shí)，寬度和高度用百分比還是px單位？頁面布局好后，當(dāng)頁面縮小時(shí)頁面布局會(huì)亂，是為什么呢？

Html/CSS JavaScript

慕勒4647995 2016-07-05 22:08:11

查看完整描述

4 回答

super_mb

TA貢獻(xiàn)101條經(jīng)驗(yàn) 獲得超107個(gè)贊

如果你希望頁面縮小時(shí)，布局不亂，可以有兩種方式：

給body加上一個(gè)min-width最小寬度，以px為單位，這樣當(dāng)頁面變小時(shí)，當(dāng)達(dá)到你所設(shè)置的最小寬度，body的寬度不再改變，超出的部分會(huì)用橫向滾動(dòng)條顯示，其內(nèi)所有元素的布局也不會(huì)受影響。
使用百分比設(shè)置寬度，所有會(huì)在頁面變化后布局改變的元素的寬度都設(shè)置成百分比寬度，這樣在縮放時(shí)，頁面內(nèi)的各個(gè)元素也會(huì)跟著縮放，寬度占比不變，當(dāng)然前提是設(shè)置CSS樣式前，先給body和html這兩個(gè)元素設(shè)置寬度為100%，避免后面出錯(cuò)。

至于高度，我建議使用確定的值，不要用百分比，因?yàn)轫撁娴拇笮?duì)高度基本沒影響。

2 反對(duì) 回復(fù) 2016-07-05

慕勒4647995
使用百分比布局，相關(guān)的div和標(biāo)簽width需要計(jì)算再設(shè)置吧？

回復(fù) 2016-07-06
super_mb
是的，看你需要占多少了。

回復(fù) 2016-07-06
慕勒4647995
謝謝你

回復(fù) 2016-07-06

nickylau82

TA貢獻(xiàn)128條經(jīng)驗(yàn) 獲得超67個(gè)贊

現(xiàn)在都自適應(yīng)了。。。要么自己寫@media，要么用boostrap。

至少有個(gè)原則是，最外面容器寬度可以寫死多少px，但是高度不要寫

1 反對(duì) 回復(fù) 2016-07-06

天涯帥哥

TA貢獻(xiàn)38條經(jīng)驗(yàn) 獲得超8個(gè)贊

一般布局中，都使用百分比，還有就是高度最好不要設(shè)置出來，讓元素自己去撐盒子得高度，

反對(duì) 回復(fù) 2016-07-05

慕勒4647995
嗯，高度最好不使用固定，但是有些頁面的內(nèi)容很少，不固定高度達(dá)不到滿屏，不設(shè)定高度的前提是內(nèi)容較多吧

回復(fù) 2016-07-06

剛毅87

TA貢獻(xiàn)345條經(jīng)驗(yàn) 獲得超309個(gè)贊

最好使用百分比,這樣可以隨頁面的變化而變化,而不改變布局;

布局會(huì)亂,是因?yàn)槟闶褂玫氖枪潭ㄖ蛋?

反對(duì) 回復(fù) 2016-07-05

慕勒4647995
有部分使用了百分比，有部分使用了固定px，導(dǎo)致頁面在縮小時(shí)發(fā)生位置錯(cuò)亂。。。

回復(fù) 2016-07-06
剛毅87
最好都使用百分比或者 rem 布局

回復(fù) 2016-07-06
qq_慕粉6155881
如果你全用百分比，而沒有外層固定，依然是一盤散沙

回復(fù) 2021-04-18

關(guān)注