- 相關(guān)推薦
網(wǎng)頁(yè)設(shè)計(jì):自適應(yīng)網(wǎng)頁(yè)所有屏幕寬度解析
隨著網(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ì)大。╡m或者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、媒體查詢(xún)器@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è)設(shè)計(jì):自適應(yīng)網(wǎng)頁(yè)所有屏幕寬度解析】相關(guān)文章:
自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的方法03-13
什么是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)07-26
如何制作自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)05-22
如何設(shè)計(jì)制作自適應(yīng)網(wǎng)頁(yè)01-30
如何設(shè)計(jì)制作自適應(yīng)網(wǎng)頁(yè)04-03
自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念和方法07-04
網(wǎng)頁(yè)設(shè)計(jì)誤區(qū)解析07-23
如何做好自適應(yīng)網(wǎng)頁(yè)的設(shè)計(jì)05-18
自適應(yīng)設(shè)計(jì)與響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的區(qū)別07-14