webApp 頁面布局
1. 流式布局
概念：
流式布局是頁面元素寬度按照屏幕分辨率進行適配調整，但是整體布局不變。
設計方法：
布局都是通過百分比來定義寬度，但是高度大都是用px固定的。
弊端：
- 雖然可以讓各種屏幕適配，但是顯示的效果極其不好。（有些手機頁面的寬度會被拉伸，但是高度不變，很不協調。）
- 大量百分比布局，也會出現許多兼容問題。
2. 靜態布局
概念：
靜態布局是不管瀏覽器尺寸是多少，網頁上所有元素的尺寸一律使用px作為單位，。這種設計常用於pc端
設計方法：
結合min-width，如果小於這個寬度就會出現滾動條，如果大於這個寬度，則會出現留白
弊端：
- 大屏幕手機兩側留白太多，頁面會顯得比較小，操作按鈕也比較小
- 這種設計只適用於
PC端，移動端有嚴重的不兼容性
3. 媒體查詢@media
概念：
媒體查詢是css3的新屬性，為不同屏幕分辨率定義一個布局樣式，即元素的位置和大小都是會改變的。
設計方法：
根據不同的分辨率來設計所需要的元素的位置和大小
//適配iphone 5
@media screen and (max-width: 320px) {
html{font-size: 14px;}
.name{
font-size: 14px;
margin-top: 28px;
}
}
//適配寬度在321px - 413px 之間
@media screen and (min-width: 321px) and (max-width: 413px) {
html{font-size: 16px;}
.name{
font-size: 16px;
margin-top: 32px;
}
}
//適配寬度在414px - 639px 之間
@media screen and (min-width: 414px) and (max-width: 639px) {
html{font-size: 17px;}
.name{
font-size: 17px;
margin-top: 34px;
}
}
//適配寬度大於640px
@media screen and (min-width: 640px) {
html{font-size: 18px;}
.name{
font-size: 18px;
margin-top: 36px;
}
}
弊端：
- 要匹配足夠多的屏幕大小，工作大，維護性難，需要足夠大的耐心
- 媒體查詢也是有限的，可以枚舉出來的只能適應主流的寬高
4. 設置viewport進行縮放
概念：
通過<meta>來提供一些頁面的元信息，位於文檔的頭部<head>標簽內來進行縮放
設計方法：
<meta name="viewport" content="width=device-width,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no" />
通過設置最大縮放比maximum-sacle和最小縮放比minimum-scale來兼容屏幕。
弊端：
- 全局縮放，可能會造成出錯。一般不單獨使用，可以結合媒體查詢或是
rem單位等來使用。
5. rem等比例適配屏幕
概念：
rem是css3新增的一個相對長度單位，相對於根元素（即html元素）font-size計算值的倍數。通過設置html的字體大小，來控制rem的大小。
設計方法：
1）@media媒體查詢在css中定義好根元素的font-size的大小
通過@media媒體查詢來更改html的字體大小，實現兼容不同的設備。
//適配iphone 5
@media screen and (max-width: 320px) {
html{font-size: 14px;} //1rem = 14px
}
//適配寬度在321px - 413px 之間
@media screen and (min-width: 321px) and (max-width: 413px) {
html{font-size: 16px;} //1rem = 16px
}
//適配寬度在414px - 639px 之間
@media screen and (min-width: 414px) and (max-width: 639px) {
html{font-size: 17px;} //1rem = 17px
}
//適配寬度大於640px
@media screen and (min-width: 640px) {
html{font-size: 18px;} //1rem = 18px
}
設計好根元素之后，頁面中所有的元素的位置和大小單位都采用rem來寫。
2）js動態計算font-size大小
用@media來設置根元素的font-size不能使所有的設備全適配，用js來計算font-size可以實現全適配。在<script>標簽中加上如下代碼，這個標簽最好放在<head>頭部里。
(function(){
document.addEventListener('DOMContentLoaded',function(){
var html = document.documentElement;
var deviceWidth = html.clientWidth;
html.style.fontSize = deviceWidth/750*100 + "px";
},false);
})();
其中750 數字是設計稿的尺寸，這里采用的是iPhone 6 的設計稿尺寸750px，因為計算出來的font-size字體太小，且有些瀏覽器不兼容太小的字號，所以font-size要放大100倍。
頁面元素設置寬高
css中的尺寸 = 設計稿尺寸 / 100
上述的js代碼也可以進行簡化：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 *100 + "px";
效果和原理都是一樣的。同樣放在一個<script>標簽里，標簽放在<head>里面。
6. 引用flexible.js
概念：
flexible.js是阿里團隊開源的一個庫，可以輕松兼容各種不同的移動端設備自適應的問題
設計方法：
1）結合viewport使用
在頁面的<head>中引入viewport
<meta name="viewport" content="width=device-width,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2）引入flexible_css.js,flexible.js
在頁面的<head>中引入文件
// 加載阿里CDN的文件
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
也可以把這兩個文件下載到自己的項目中，然后引入，效果是一樣的。
3）頁面單位采用rem格式
可以通過一些插件快速的將px->rem，比如sublime text 3 的 CSSREM 插件可以完成自動轉換。
除了使用編輯器的插件外，還可以使用css 預處理器，比如scss，里面的函數、混合宏這些功能來實現。
還有一款npm工具是px2rem，或是使用PostCSS。這兩者適合在大項目中，因為可以配合gulp 或是 webpack，不適合單頁面。
4）頁面效果
配置好flexible.js后，可以在頁面上看到它給<html>元素添加了data-dpr屬性和font-size屬性，並且兩者會根據不同的手機分辨率來動態的改變它們的值。
弊端：
- 不適配平板
- 不兼容其他的UI框架組件，比如：
vux, weui, mini ui等。因為市面上的一些UI 組件都是自身已經做過適配的，再結合flexible的話，會導致整體組件被縮小，反而處理起來更加麻煩
7. vw, vh, vmax, vmin屬性
概念：
vw，vh是css3新增的單位屬性，他們的計算方式是相對於視口的寬度和高度。視口被均分為100單位
vmax相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位
vmin相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的
設計方式：
元素的位置和大小采用vw , vh , vmax , vmin 為單位
弊端：
兼容性問題，有些手機不兼容這個單位
綜上所述：
單一的H5頁面可以通過動態計算js來改變font-size大小。
大型的項目比如webpack項目可以采用rem + flexible + sass