剛換公司，設計稿還沒出，也沒有安排新任務，所以抽空整理一下移動端布局方式。
移動端布局方式整理：
1.固定meta視圖
<meta name="viewport" content="width=750px,user-scalable=no">
這種寫法中，利用meta標簽，將視圖寬度定位了750px，固定值，也就是ios6的標准，然后css也是基於750px的設計稿進行布局
優點：前端開發十分快速，都是死值
缺點：匹配不完全，手機像素高於這個的，顯示這個效果，不理想狀態；低於這個狀態的，不兼容這個狀態；
固定寬在做項目的時候由於每個手機屏幕的高度不同需要有一個最小的內容區域
2.rem布局
rem是一種基於頁面根元素的布局方式
當手機屏幕大小改變了，只要改變對應的頁面根元素，就可以實現頁面的縮小放大。
按照750px的設計稿，進行布局的時候 可以在head中添加下圖的一段j，監聽屏幕改變，從而動態改變頁面根元素的fonsize大小，對頁面進行縮放改變
換句話說 設置根元素 fontsize=16px 那么 1rem=16px，所以根據屏幕大小 而動態改變 fontsize的值，從而做到 移動端rem適配效果。
<script type="text/javascript">
(function (win,doc) {
function setSize() {
doc.documentElement.style.fontSize=20*document.documentElement.clientWidth/750+'px';
}
setSize();
win.addEventListener('resize',setSize,false)
})(window,document)
</script>
優點：引入js后，通過動態修改根元素fontsize,根據手機屏幕 自動縮放
缺點：head中 就要引入js，會有一點加載影響
3.meta媒體查詢 動態設置，幾個手機的比例，進行對應匹配；
meta標簽，通過媒體查詢 按照不同手機的像素寬高不同，進行條件匹配
優點：根據不同手機定制不同css，達到完美展示
缺點：需要寫匹配很多手機，寫很多套css，對前端工作量比較大
引用一下相關知識點 ：網頁布局中 px,rem,em,pt https://www.cnblogs.com/GoTing/p/10819172.html
4.改變縮放比例，進行布局，類似於第2種方式，2是根據設備寬高對根元素進行font-size的動態改變，4這種方式則是通過改變meta種縮放比例，來進行動態改變頁面的
這里有一個點需要說明
像素比 window.devicePixelRatio = 設備像素/css像素
（補充一下 分辨率 和像素的 內容： 某博客內容
- 高分辨率：eg每一毫米5像素點，像素點越多，色塊越多，頁面越清晰
- 低分辨率：eg每一毫米3像素點，像素點越少，色塊越少，頁面越模糊
- 肉眼看得請不清晰，跟屏幕實際尺寸的大小沒關系，而跟單位長度的像素點有關，低分辨率的放在大屏上 也只是一個 放大的不清楚的畫面而已
-
對於前端開發來說，設計圖是1920或者是1366並不代表是寬度
-
所以當你的網頁完全按照設計圖使用px來實現的話，有可能出現兩種情況：
- html寬度用了設計圖1366px，但無奈到了1024的電腦或者手機的時候，就會出現了橫向滾動條
- html寬度用了設計圖1366px，到了1920的電腦上，就會出現大量的留白
）
5.百分比布局
將整個頁面 按照百分比 進行布局 對於寬度 比較好把握 但是 高度還是需要具體的值