移動端布局

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