前言
小編一直對移動端開發(fā)頗有興趣，無奈接手的項目都是主打pc端送巡，如今終于有移動端的項目到我手啦摹菠！~
先記錄一下，本文會持續(xù)更新~~~~~~~~
一 html <head>部分
通常在移動端頁面上要加上這樣一行代碼
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width=device-width（設(shè)置頁面寬度為設(shè)備寬度）
user-scalable=no（不允許用戶縮放）
initial-scale=1.0（默認縮放比例為1）
maximum-scale=1.0（ 最大縮放比例為1）
minimum-scale=1.0（最小縮放比例為1）
二 移動端多尺寸自適應(yīng)
html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
/* 設(shè)計稿px換算直接/100即可得到rem值骗爆。移動平臺*/
@media all and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
html { font-size: 703%; }
}
@media all and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
html { font-size: 732.4%; }
}
@media all and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
html { font-size: 750%; }
}
@media all and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
html { font-size: 781.25%; }
}
@media all and (min-width:414px) and (max-width:431px) and (orientation:portrait){
html { font-size: 808.6%; }
}
@media all and (min-width:432px) and (max-width:479px) and (orientation:portrait){
html { font-size: 843.75%; }
}
三 響應(yīng)式
html{font-size: 100px;}
/* 需要把得到的像素值/100px,轉(zhuǎn)換為rem單位次氨。多終端響應(yīng)式*/
@media only screen and (min-width: 320px) and (max-width: 767px) {
.div{
font-size: 0.12rem;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px){
.div{
font-size: 0.14rem;
}
}
@media only screen and (min-width:1024px) {
.div{
font-size: 0.16rem;
}
}
四 內(nèi)容自適應(yīng)
html{font-size:10px;}/*1rem等于10px。固定尺寸用px摘投，自適應(yīng)用rem*/
.div{/*此處為固定尺寸*/
width:100px;
height:100px;
}
.div{/*此處為自適應(yīng)*/
width:10rem;
height:10rem;
}
五 js代碼實現(xiàn)自適應(yīng)
var width=document.documentElement.clientWidth;
document.write(`<style>html{font-size:${width / 10}px</style>`)
JS代碼就兩行煮寡，將rem設(shè)置為手機寬度的的10%，雖然設(shè)置width / 100可以完全模擬vw（自適應(yīng)不用vw是因為vw兼容性太差了）犀呼，但是當(dāng)em為1%時幸撕，一但寬度小于120px時，font-size就會小于12px外臂，低于chrome默認的最小font-size就會出現(xiàn)bug坐儿，所以我們設(shè)置rem為10%。
還需要注意的是雖然width和height是用rem使用专钉，但是不代表別的大小也需要用rem（如果字體的font-size也用rem挑童，那當(dāng)寬度很小時，字會小的看不清）跃须，我們應(yīng)該搭配別的單位以獲得更美觀的效果站叼。
六 使用SCSS自動轉(zhuǎn)換px
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640
.box{
background: grey;
width: px(256);
height: px(128);
margin: px(32) px(32);
float: left;
}
為了減少我們計算量，我們可以直接使用scss寫一個function幫我們解決轉(zhuǎn)換的問題菇民。
