移動(dòng)端布局

一、移動(dòng)端和pc端布局的不同
1.顯示設(shè)備（屏幕）
2.操作（鼠標(biāo)、指尖）
3.瀏覽器內(nèi)核:移動(dòng)端不用考慮ie，但是各種瀏覽器內(nèi)核（手機(jī)自帶）、微信瀏覽器內(nèi)核
4.運(yùn)行設(shè)備 移動(dòng)設(shè)備（輕便、迅速、便攜） pc端（體驗(yàn)）
5.網(wǎng)絡(luò)不同 移動(dòng)4g（注重速度） pc光纖（注重體驗(yàn)速度）
頁(yè)面設(shè)置不同：
1.Meta標(biāo)簽設(shè)置
2.單位=======用來(lái)適應(yīng)不同的移動(dòng)端屏幕尺寸；

Px像素。類似絕對(duì)單位。其實(shí)也是相對(duì)單位，相對(duì)于屏幕的分辨率；
Pt磅 點(diǎn) 打印的尺寸
Em 相對(duì)單位，相對(duì)于父級(jí)的font-size 1em=父級(jí)的font-size（直接的父級(jí)）
Rem相對(duì)單位，相對(duì)于根元素的font-size 1rem=根元素的font-size
Vw，vh相對(duì)單位，相對(duì)于屏幕的寬度和高度，1vw==1%屏幕的寬度
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,?user-scalable=0">?

width=device-width:寬度等于當(dāng)前設(shè)備的寬度
intial-scale:頁(yè)面首次被顯示是可視區(qū)域的縮放比例，取值1.0則頁(yè)面按實(shí)際尺寸顯示，無(wú)任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區(qū)域的縮放級(jí)別，
maximum-scale用戶可將頁(yè)面放大的程序，1.0將禁止用戶放大到實(shí)際尺寸之上。
user-scalable:是否可對(duì)頁(yè)面進(jìn)行縮放，no 禁止縮放

二、Meta標(biāo)簽的設(shè)置不同及其不同的效果（擴(kuò)展）
1.強(qiáng)制讓文檔與設(shè)備的寬度保持1：1
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,?user-scalable=0">

2.忽略頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼
<meta name="format-detection" content="telephone=no"> 3.忽略頁(yè)面中的郵箱格式為郵箱
<meta name="format-detection" content="email=no"/>
4.<!-- 在web app應(yīng)用下?tīng)顟B(tài)條（屏幕頂部條）的顏色 -->? ? <meta name="apple-mobile-web-app-status-bar-style" content="black" />

手動(dòng)刷新
<script>
?????var bw = (document.documentElement.clientWidth/7.2)+"px";
? ? ? ? ? ? ? //獲取屏幕寬度)除以7.2，添加上“px”，7.2是設(shè)計(jì)稿的寬度除以100后得到的值
?????var htmlTag = document.getElementsByTagName("html")[0]; ? ? ? ?
? ? ? ? ? ? ? ? ? ?//在文檔里面通過(guò)元素名來(lái)獲取元素，html
? ?? htmlTag.style.fontSize=bw; ?
? ? ?//把計(jì)算后的值復(fù)制給根元素的font-size;1rem=100px
</script>

三、Js方法獲取HTMLfontsize（自動(dòng)刷新）
<script>
????? window.onload = function(){
/720代表設(shè)計(jì)師給的設(shè)計(jì)稿的寬度，你的設(shè)計(jì)稿是多少，就寫(xiě)多少;100代表?yè)Q算比例，這里寫(xiě)100是
為了以后好算,比如，你測(cè)量的一個(gè)寬度是100px,就可以寫(xiě)為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>