網(wǎng)頁(yè)設(shè)計(jì)：自適應(yīng)網(wǎng)頁(yè)所有屏幕寬度解析

時(shí)間：2025-08-28 12:12:06 網(wǎng)頁(yè)設(shè)計(jì)

　　隨著網(wǎng)絡(luò)與科技的快熟發(fā)展，越來(lái)越多的手機(jī)廠商開(kāi)始打起手機(jī)之間的戰(zhàn)爭(zhēng)，手機(jī)的快速發(fā)展也使得越來(lái)越多的人開(kāi)始使用手機(jī)上網(wǎng)。移動(dòng)設(shè)備正超過(guò)桌面設(shè)備，成為訪問(wèn)互聯(lián)網(wǎng)的最常見(jiàn)終端。那么就會(huì)出現(xiàn)一個(gè)問(wèn)題，如何才能讓PC端的網(wǎng)頁(yè)在手機(jī)上正常顯示？歡迎大家閱讀！更多相關(guān)信息請(qǐng)關(guān)注相關(guān)欄目！

　　手機(jī)與PC的屏幕寬度有著很大的區(qū)別，會(huì)造成同樣的內(nèi)容在手機(jī)與PC端出現(xiàn)兩種不同的顯示結(jié)果。那該如何才能使得手機(jī)與PC都能對(duì)網(wǎng)頁(yè)呈現(xiàn)出令人滿意的結(jié)果呢，本文收集了以下幾種方法，有興趣的小伙伴們可以看下：

　　1、在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽。

　　viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。

　　注意：該方式不支持IE8及IE8以下的版本

　　2、不使用絕對(duì)寬度

　　由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。對(duì)圖像來(lái)說(shuō)也是這樣。

　　具體說(shuō)，CSS代碼不能指定像素寬度：width:xxx px;

　　只能指定百分比寬度： width: xx%; 或者 width:auto;

　　3、使用相對(duì)大小的字體

　　字體也不能使用絕對(duì)大小（px），只能使用相對(duì)大小（em或者rem）

　　例如： body

　　上面的代碼指定，字體大小是頁(yè)面默認(rèn)大小的100%，即16像素（1em=16px）。

　　h1的大小是默認(rèn)大小的1.5倍，即24像素（24/16=1.5）

　　將想要的像素去除默認(rèn)的16像素可以得到em

　　4、流動(dòng)布局（fluid grid）