一、移動端和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>