一、移動端和pc端佈局的不同
1.顯示裝置（螢幕）
2.操作（滑鼠、指尖）
3.瀏覽器核心:移動端不用考慮ie，但是各種瀏覽器核心（手機自帶）、微信瀏覽器核心
4.執行裝置 移動裝置（輕便、迅速、便攜） pc端（體驗）
5.網路不同 移動4g（注重速度） pc光纖（注重體驗速度）
頁面設定不同：
1.Meta標籤設定
2.單位=======用來適應不同的移動端螢幕尺寸；

Px畫素。類似絕對單位。其實也是相對單位，相對於螢幕的解析度；
Pt磅 點 列印的尺寸
Em 相對單位，相對於父級的font-size 1em=父級的font-size（直接的父級）
Rem相對單位，相對於根元素的font-size 1rem=根元素的font-size
Vw，vh相對單位，相對於螢幕的寬度和高度，1vw==1%螢幕的寬度
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

width=device-width:寬度等於當前裝置的寬度
intial-scale:頁面首次被顯示是可視區域的縮放比例，取值1.0則頁面按實際尺寸顯示，無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
maximum-scale使用者可將頁面放大的程式，1.0將禁止使用者放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放，no 禁止縮放

二、Meta標籤的設定不同及其不同的效果（擴充套件）
1.強制讓文件與裝置的寬度保持1：1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2.忽略頁面中的數字識別為電話號碼
<meta name="format-detection" content="telephone=no"> 3.忽略頁面中的郵箱格式為郵箱
<meta name="format-detection" content="email=no"/>
4.<!-- 在web app應用下狀態條（螢幕頂部條）的顏色 -->    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

手動重新整理
<script>
     var bw = (document.documentElement.clientWidth/7.2)+"px";
              //獲取螢幕寬度)除以7.2，新增上“px”，7.2是設計稿的寬度除以100後得到的值
     var htmlTag = document.getElementsByTagName("html")[0];        
                   //在文件裡面通過元素名來獲取元素，html
     htmlTag.style.fontSize=bw;  
     //把計算後的值複製給根元素的font-size;1rem=100px
</script>

三、Js方法獲取HTMLfontsize（自動重新整理）
<script>
      window.onload = function(){
/720代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這裡寫100是
為了以後好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等/
getRem(640,100)
};
window.onresize = function(){
getRem(640,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
</script>