rem是什么？
rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。
計算原理：
1 屏幕寬為 clientWidth(px)。 設計稿寬度為 750 (px), 假設 n = clientWidth(px)/750(px);單位化簡===> n= clientWidth/750 ;
2 將 html的 font-size: n(px);
3 則有 n(px) = 1(rem) ,因為1rem為根節點(html節點)字體的大小一倍;
4 假設有一個 div ,在設計稿測量的寬度為 ruleW(px);
5 則需要寫入的寬度 width: 設為 w (單位暫不確定)
6 則有 w/clientWidth(px) = ruleW(px)/750(px) 單位化簡===> w/clientWidth(px) = ruleW/750
7 化簡 w = (clientWidth/750)*ruleW(px) 化簡==> w = n*ruleW(px) 轉換 w = ruleW * n(px)
8 最后得出 w = ruleW * 1(rem) = ruleW(rem);
結論: 當我們設置html的font-szie為 (屏幕寬度/設計稿寬度) 的px 時
當我們在設計稿上測得的 px 單位值,直接將值換為 rem單位寫到代碼里面即可,這點與微信小程序的 rpx 單位適配類似
問題: 上面推導完全按照 數學問題來推算,忽略了一個重要的問題,就是瀏覽器存在最小字體,不得小於 12px,當我們設置 font-size: n(px) ; 屏幕寬度除以750可能已經很小了,這個比例已經不太合適了,所以我們把它放大一百倍
放大比例計算規則如下:
1. n = clientWidth(px)/750(px); n2 = clientWidth(px)/7.50(px); n * 100 = n2; n2為n放大后的比例
2. 將 html的 font-size: n2(px); n2為放大后的比例
3. 則有 n2(px) = 1(rem) , n (px) * 100 = 1(rem) , n(px) = 1/100 (rem);
4 假設有一個 div ,在設計稿測量的寬度為 ruleW(px);
5 則需要寫入的寬度 width: 設為 w (單位暫不確定)
6 則有 w/clientWidth(px) = ruleW(px)/750(px) ,注意這里還是除以 750, 單位化簡===> w/clientWidth(px) = ruleW/750
7 化簡 w = (clientWidth/750)*ruleW(px) 化簡==> w = n*ruleW(px) 轉換 w = ruleW * n(px)
8 最后得出 w = ruleW * 1/100(rem) = (ruleW/100)(rem)
結論: 當我們設置html的font-szie為 (屏幕寬度*100/設計稿寬度) 的px 時 當我們在設計稿上測得的 px 單位值,直接將值除以100換為 rem單位寫到代碼里面即可
下面給出幾種適配方案：
所有的使用例子，以一個 div ，在 750 的設計稿中測的 寬度 750 px 、高度 80px 、 背景 pink
1、js適配，在html頁面的 head標簽內加入如下代碼： （推薦）
<script type="text/javascript">
//手機端的適配
document.addEventListener("DOMContentLoaded",function(){
document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
});
window.onresize = function(){
document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
}
</script>
使用
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
2、css的 calc適配 （推薦）
html{
font-size: calc(100vw / 7.5);
}
使用
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
3、less 適配（不是和很標准）
.re(@width) {
@xs: 100px/(750px/@width);
@media (max-width:(@width + 1px)) {
html {
font-size: @xs;
}
}
}
.re(1600px);
.re(1440px);
.re(1280px);
.re(1024px);
.re(960px);
.re(950px);
.re(900px);
.re(800px);
.re(773px);
.re(768px);
.re(736px);
.re(732px);
.re(731px);
.re(667px);
.re(640px);
.re(600px);
.re(568px);
.re(533px);
.re(435px);
.re(414px);
.re(411px);
.re(384px);
.re(375px);
.re(360px);
.re(320px);
使用：
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
4、scss 適配
// 計算rem的基准字體
$rem-base-font-size: 100px;
// UI設計圖的分辨率寬度
$UI-resolution-width: 750px;
// 需要適配的屏幕寬度
$device-widths: 240px, 320px, 360px, 375px, 390px, 414px, 480px, 540px, 640px, 720px, 768px,1080px, 1024px;
@mixin html-font-size() {
@each $current-width in $device-widths {
@media only screen and (min-width: $current-width) {
html {
$x: $UI-resolution-width / $current-width; //計算出是幾倍屏
font-size: $rem-base-font-size / $x;
}
}
}
}
@include html-font-size();
@function pxToRem($px) {
@return $px / $rem-base-font-size * 1rem;
}
使用：
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
或者：
div{
height: pxToRem(80px);
width: pxToRem(750px);
background: pink;
}
總結： 一般使用第一種，或者第二種較多，
最后 ipad 上的布局
注意：第一種，或者第二種 兩種方式在 ipad上面，會出現問題，因為ipad的寬度大於高度，類似於 pc的布局。其實就是一個縮小版的pc，可以直接用 px寫布局。
實際上，如果確定在 ipad 上面，就不需要再縮放了。直接還原為 pc布局，，為了同時兼容 手機端 和 ipad 。所以我們將 第一種方式修改一下
;(function(){
function loaded(){
var ua = navigator.userAgent.toLowerCase();
if(/ipad/i.test(ua)){
//是 ipad
document.getElementsByTagName("html")[0].style.fontSize="50px"; //等同於縮小一倍,這個值,自己可以調整
}else{
var width = document.documentElement.clientWidth;
document.getElementsByTagName("html")[0].style.fontSize=(width/7.50)+"px";
}
}
document.addEventListener("DOMContentLoaded",loaded);
loaded();
}());
在 ipad上面 設置 html 的字體為 50px的原因是，因為我們在移動端，設置了字體為 縮小100后的 rem。還是上面的例子：
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
以寬度來解析：
實際在 ipad 中的網頁呈現為 0.8 rem => 0.8 * 50 px = 40px; 也就是說，我原本在設計稿上測的 80px ，在 ipad上面只展示為 40px。縮小一半，因為 ipad 看上去就像是縮小版的pc。當然這個比例可以自己調整。