H5移動(dong)端(duan)頁面設計的基(ji)礎規范
時間：2018-09-27 來源：未知
隨著(zhu)智能手(shou)機(ji)(ji)、平板電腦等移動終(zhong)端(duan)的(de)發(fa)展和普(pu)及，普(pu)通(tong)(tong)大眾對(dui)手(shou)機(ji)(ji)網站的(de)認(ren)知度得到(dao)了(le)明顯的(de)提升。安卓，IOS手(shou)機(ji)(ji)系統的(de)逐步發(fa)展也帶(dai)動了(le)手(shou)機(ji)(ji)頁(ye)面的(de)發(fa)展，跟PC網頁(ye)相比，手(shou)機(ji)(ji)網站和普(pu)通(tong)(tong)網站有兩大不同點(dian)：
本(ben)文引用地(di)址：//fsbing.cn/emb/Column/7274.html
第(di)一，訪問入口(kou)不同。與傳統的電腦(nao)上(shang)網相比，手機上(shang)網具有便捷、隨(sui)(sui)時隨(sui)(sui)地的特(te)點。
第二，瀏覽方(fang)式(shi)不同。由于(yu)電腦上(shang)的(de)屏幕(mu)比手(shou)(shou)機(ji)大很多(duo)(duo)，普通(tong)網(wang)站比手(shou)(shou)機(ji)網(wang)站擁有更(geng)強(qiang)的(de)展示(shi)能力(li)，能在(zai)一個網(wang)頁上(shang)占時大量(liang)的(de)圖(tu)片(pian)、視(shi)頻、語音等全方(fang)位的(de)信息，但是手(shou)(shou)機(ji)網(wang)站由于(yu)屏幕(mu)尺(chi)寸的(de)限制，更(geng)多(duo)(duo)地僅僅是用文字和圖(tu)片(pian)來表現。
介于(yu)這兩點不同于(yu)普通網站的(de)區別，分享(xiang)一下我的(de)一些(xie)移(yi)動端網頁設計(ji)經驗與心得。
⒈ 分辨率
這應該是移動(dong)端(duan)網頁(ye)(ye)關(guan)心的問(wen)題了，因為(wei)移動(dong)設(she)備(bei)(bei)五(wu)花(hua)八門(men)，各種分(fen)辨(bian)率都(dou)有。要想在這些設(she)備(bei)(bei)上都(dou)能有良(liang)好(hao)的瀏覽體驗，得花(hua)一(yi)番功夫。使用viewport：這已經是移動(dong)端(duan)網頁(ye)(ye)的必(bi)備(bei)(bei)了，它(ta)可(ke)以設(she)定頁(ye)(ye)面的寬度，是否(fou)允許縮放等等。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
一般設置width=device-width，就是(shi)(shi)設置為設備的屏(ping)幕寬度(du)，當然也可(ke)以(yi)(yi)是(shi)(shi)具(ju)體數(shu)值。百分比(bi)與max(min)-width使用：移(yi)動端網頁不僅分辨(bian)率不一，而且隨(sui)時可(ke)以(yi)(yi)橫豎屏(ping)切換，所(suo)以(yi)(yi)百分比(bi)寬度(du)設定非常必要，再配合max(min)-width限制大(小(xiao))寬度(du)，能有(you)效(xiao)的適應各種分辨(bian)率。
<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 640px)">
這里(li)的(de)意(yi)思(si)就是(shi)在大于640px的(de)屏幕(mu)寬度下，使用style1樣式，也可以寫(xie)在樣式內部，如：
@media screen and (min-width: 640px){.d1{background:#ccc;}}
2.不使用絕對寬度
由于網頁會根(gen)據屏(ping)幕寬(kuan)度調(diao)整布(bu)(bu)局(ju)，所以不(bu)能(neng)(neng)使(shi)用絕(jue)對(dui)寬(kuan)度的布(bu)(bu)局(ju)，也不(bu)能(neng)(neng)使(shi)用具有絕(jue)對(dui)寬(kuan)度的元(yuan)素。這一條非常重要。 具體(ti)說，CSS代碼(ma)不(bu)能(neng)(neng)指定像素寬(kuan)度： width:xxx px;
只能指定(ding)百分比寬度： width: xx%或(huo)者(zhe) width:auto。
3.相對大小的字體
字體也(ye)不能使用絕對大小(px)，而(er)只能使用相對大小(em)。
body {font: normal 100% Helvetica, Arial, sans-serif; }
上面的(de)代碼(ma)指定，字體(ti)大小是頁面默(mo)認大小的(de)100%，即16像素(su)。
h1 {font-size: 1.5em;}
然后，h1的大小是默認大小的1.5倍(bei)，即24像素(24/16=1.5)。
small { font-size: 0.875em; }
small元(yuan)素的大(da)小(xiao)是默(mo)認(ren)大(da)小(xiao)的0.875倍(bei)，即14像素(14/16=0.875)。
4.流動布局(fluid grid)
"流動(dong)布局"的含義是(shi)，各個區塊的位置都(dou)是(shi)浮動(dong)的，不是(shi)固定不變的。
.main { float: right; width: 70%; }
.leftBar { float: left; width: 25%; }
float的(de)好處是，如果寬度太小，放不(bu)下兩(liang)個元(yuan)素(su)，后面的(de)元(yuan)素(su)會自(zi)動(dong)滾動(dong)到前面元(yuan)素(su)的(de)下方(fang)，不(bu)會在(zai)水平方(fang)向(xiang)overflow(溢出)，避免了水平滾動(dong)條的(de)出現。
另外，絕對定位(position: absolute)的使(shi)用，也要非(fei)常小心。
4.圖片的自適應
除了(le)布局和文本，"自適應(ying)網頁設(she)計"還必須實現圖片的自動縮(suo)放。
這只要一行CSS代碼：
img { max-width: 100%;}
這行(xing)代碼對于大(da)多數嵌入(ru)網頁的視頻也有(you)效，所以可以寫成(cheng)：
img, object { max-width: 100%;}
老版(ban)本的IE不(bu)支(zhi)持max-width，所以只(zhi)好寫成：
img { width: 100%; }
此外，windows平臺縮放圖片時，可能出現圖像失真(zhen)現象。這(zhe)時，可以嘗試使用IE的專(zhuan)有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
