5種方法教你用自適應(yīng)網(wǎng)頁(yè)適應(yīng)所有屏幕寬度

隨著網(wǎng)絡(luò)與科技的快熟發(fā)展，越來(lái)越多的手機(jī)廠商開始打起手機(jī)之間的戰(zhàn)爭(zhēng)，手機(jī)的快速發(fā)展也使得越來(lái)越多的人開始使用手機(jī)上網(wǎng)。移動(dòng)設(shè)備正超過(guò)桌面設(shè)備，成為訪問(wèn)互聯(lián)網(wǎng)的常見終端。那么就會(huì)出現(xiàn)1個(gè)問(wèn)題，如何才能讓PC端的網(wǎng)頁(yè)在手機(jī)上正常顯示？手機(jī)與PC的屏幕寬度有著很大的區(qū)別，會(huì)造成同樣的內(nèi)容在手機(jī)與PC端出現(xiàn)兩種不同的顯示結(jié)果。那該如何才能使得手機(jī)與PC都能對(duì)網(wǎng)頁(yè)呈現(xiàn)出令人滿意的結(jié)果呢，本文收集了以下5種方法，希望對(duì)大家有幫助：

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ì)大?。╬x），只能使用相對(duì)大小（em或者rem）
例如： body
上面的代碼指定，字體大小是頁(yè)面默認(rèn)大小的100%，即16像素（1em=16px）。
h1
h1的大小是默認(rèn)大小的1.5倍，即24像素（24/16=1.5）
將想要的像素去除默認(rèn)的16像素可以得到em

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

"流動(dòng)布局"的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。
.main
.leftBar
float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。

5、媒體查詢器@media

"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"的核心，就是CSS3引入的MediaQuery模塊。
它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。
上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載tinyScreen.css文件。
如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

網(wǎng)頁(yè)名稱：5種方法教你用自適應(yīng)網(wǎng)頁(yè)適應(yīng)所有屏幕寬度
文章來(lái)源：http://www.muchs.cn/news27/316077.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站設(shè)計(jì)公司、微信公眾號(hào)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)