- 相關(guān)推薦
如何做好自適應(yīng)網(wǎng)頁(yè)的設(shè)計(jì)
隨著3G的普及，越來(lái)越多的人使用手機(jī)上網(wǎng)。移動(dòng)設(shè)備正超過(guò)桌面設(shè)備，成為訪問(wèn)互聯(lián)網(wǎng)的最常見(jiàn)終端。于是，網(wǎng)頁(yè)設(shè)計(jì)師不得不面對(duì)一個(gè)難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)？以下僅供參考！
一、允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整
首先，在網(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%。
所有主流瀏覽器都支持這個(gè)設(shè)置，包括IE9。對(duì)于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
二、不使用絕對(duì)寬度，不使用絕對(duì)大小的字體
由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。指定百分比寬度width: xx%或者width:XXem;
使用相對(duì)大小的字體em或者rem。一般瀏覽器的默認(rèn)字體大小為16px�！癳m”是一個(gè)相對(duì)的大小，其參考物指的是相對(duì)于元素父元素的font-size。因此，1em總是等于父元素的字體大小。而rem總是相對(duì)于根元素的字體大小進(jìn)行計(jì)算的。
1.設(shè)置百分比時(shí)的計(jì)算
相對(duì)于父元素寬度的：[max/min-]width、left、right、padding、margin 等；
相對(duì)于父元素高度的：[max/min-]height、top、bottom 等；
相對(duì)于繼承字號(hào)的：font-size 等；
相對(duì)于自身字號(hào)的：line-height 等；
相對(duì)于自身寬高的：border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；
特殊算法的：background-position（方向長(zhǎng)度 / 該方向除背景圖之外部分總長(zhǎng)度 * 100）、filter 系列函數(shù)等；
如果自身設(shè)置 position: absolute，則相對(duì)于離它最近的那個(gè) position 不為 static 的外層元素，如果沒(méi)有這樣的元素，則相對(duì)于窗口。
如果 position: fixed，“父元素”指視口。
margin如果沒(méi)有加后綴是相對(duì)于寬，但是加了后綴，比如margin-left，則是相對(duì)于高；
2.設(shè)置em時(shí)的計(jì)算
元素自身沒(méi)有設(shè)置字號(hào)大小時(shí)，則默認(rèn)使用父元素字號(hào)大小。元素自身要是設(shè)置了字體大小后，則字體計(jì)算公式為：
需要轉(zhuǎn)換的像素值/父元素的font-size=em值
元素的width、height、line-height、margin、padding、border等值轉(zhuǎn)換總是以當(dāng)前元素的字號(hào)大小計(jì)算：
需要轉(zhuǎn)換的像素值/元素的font-size=em值
比如：
.outerdiv {
font-size: 32px;
}
.innterdiv {
width: 2em; /*64/32=2*/
height: 2em;
line-height: 2em;
padding: 0.5em;
}
當(dāng)innterdiv設(shè)置font-size的大小時(shí)
.innterdiv {
font-size: 0.5em;/*16/32=0.5*/
width: 2em;/*32/16=2*/
height: 2em;
line-height: 2em;
padding: 0.5em;
}
三、使用流動(dòng)布局
即各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。當(dāng)寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。
四、選擇加載CSS
"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"的核心，就是CSS3引入的Media Query模塊。設(shè)置斷點(diǎn)時(shí)，最好以?xún)?nèi)容為基礎(chǔ)設(shè)置，而不是以各種屏幕尺寸來(lái)設(shè)置。
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 780px) {}
五、圖片的自適應(yīng)
使圖片的寬度為100%,但是不超過(guò)最大寬度400px;
img {
width: 100%;
max-width:400px;
}
大多數(shù)嵌入網(wǎng)頁(yè)的視頻也可這樣寫(xiě)：img, object { max-width: 100%;}
六、font-size實(shí)現(xiàn)自適應(yīng)
使用calc實(shí)現(xiàn)字體的自適應(yīng)。比如要讓屏幕寬度在 1553px-1032px 的范圍內(nèi)變化時(shí)，font-size大小是在12px-16px之間對(duì)應(yīng)變化，則
font-size: calc(0.75em + 4*(100vw - 1032px) / 521);
vw 相對(duì)于視窗的寬度：視窗寬度是100vw。視窗寬度指瀏覽器內(nèi)部的可視區(qū)域大小，即window.innerWidth/window.innerHeight大小，不包含任務(wù)欄標(biāo)題欄以及底部工具欄的瀏覽器區(qū)域大小。
0.75em可以換成百分比f(wàn)ont-size: calc(75% + 4*(100vw - 1032px) / 521);
也可換成px單位font-size: calc(12px + 4*(100vw - 1032px) / 521);但是Safari瀏覽器不支持該寫(xiě)法。
【如何做好自適應(yīng)網(wǎng)頁(yè)的設(shè)計(jì)】相關(guān)文章：
如何設(shè)計(jì)制作自適應(yīng)網(wǎng)頁(yè)10-24
如何制作自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)10-15
如何設(shè)計(jì)制作自適應(yīng)網(wǎng)頁(yè)11-05
什么是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)07-26
自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的方法09-05
網(wǎng)頁(yè)設(shè)計(jì)：自適應(yīng)網(wǎng)頁(yè)所有屏幕寬度解析06-27
自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念和方法07-04
自適應(yīng)設(shè)計(jì)與響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的區(qū)別07-14