content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
name="viewport"/>
html
開發過程：將每個元素設定的單位使用rem（任何原本使用px，em，pt的地方），數量為（設計圖上的元素的實際px/2/37.5）rem；
根元素的基礎font-size被設定為37.5px，則1rem=37.5px
2.動態改變html字型大小
思路：改變每種不同寬度的裝置的根元素的css屬性，使其font-size值都為裝置寬度/10px。
方案1：在頁面頭部插入一段js。 //為什麼是頭部？–防止頁面閃爍
(function
() ;
window.addeventlistener('resize', newrem, false)
; newrem();})
();
@media (min-width: 320px)
}@media (min-width: 360px)
}@media (min-width: 375px)
}@media (min-width: 384px)
}@media (min-width: 414px)
}@media (min-width: 448px)
}@media (min-width: 480px)
}@media (min-width: 512px)
}@media (min-width: 544px)
}@media (min-width: 576px)
}@media (min-width: 608px)
}@media (min-width: 640px)
}@media (min-width: 750px)
}@media (min-width: 800px)
}@media (min-width: 1024px)
}
當我們拿到psd的時候可能要把psd的圖尺寸轉換為rem，下面是sass的乙個mixin方法將rem和px做了轉換 如下hotcss.scss
@function
px2rem
( $px )
@import
'px2rem.scss';
.banner//如設計稿上的banner是300px 就免去計算環節
css適配了大部分主流的螢幕，並且輕量一些，不需要進行計算。
js根據具體的螢幕寬度進行精確的計算，可以適配全部的裝置，
還是需要根據自己的使用場景進行選擇。
設定meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
(function
(doc, win)
docele.style.fontsize = 20 *
(width / 750) + 'px';
};recalculate
if (!doc.addeventlistener) return;
win.addeventlistener(resizeevent, recalculate, false);})
(document, window)
;
當我們拿到psd的時候可能要把psd的圖尺寸轉換為rem，下面是sass的乙個mixin方法將rem和px做了轉換 如下hotcss.scss
@function
px2rem
( $px )
$designwidth : 750; //如設計圖是750
//在我們的style.scss中
@import 'px2rem.scss';
$designwidth : 750; //如設計圖是750
.banner//如設計稿上的banner是300px 就免去計算環節
移動端rem布局
時隔半年，再次回顧移動端開發，感覺自己又張知識了 我們平常用的較多的單位是px,百分比，rem,em,vw,vh，但是在移動端用的比較多的還是rem，但是他在用的過程中要注意什麼呢，怎麼用呢，下面就開始啦。他是乙個度量單位，可以用他作為高寬，字型的單位。他以html中設定font size的大小為基...
rem移動端布局
1 rem是css3新增的相對長度單位，是指相對於根元素html的font size計算值的大小。簡單可理解為螢幕寬度的百分比。2 什麼是dpr?dpr是螢幕畫素密碼比 計算 dpr 液晶螢幕px尺寸 物理尺寸 量多少就是多少 常用的dpr有 dpr 2，dpr 3 window.devicepix...
移動端rem布局
什麼是rem rem是css3新增的乙個相對單位 root em，根em 這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。em 作為font size的單位時，其代表父元素的字型大小，em作為其他屬性單位時，代表自身字型大小 mdn r...