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