只需在頁面引入這段原生js**就可以了 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function (doc, win)else
};
if(!doc.addeventlistener)return;
win.addeventlistener(resizeevt, recalc,false);
doc.addeventlistener('domcontentloaded', recalc,false);
})(document, window);
這是rem布局的核心**，這段**的大意是：
如果頁面的寬度超過了640px，那麼頁面中html的font-size恒為100px，否則，頁面中html的font-size的大小為： 100 * (當前頁面寬度 / 640)
為什麼是640px？
設計圖一般是640px的，這樣相當於100px = 1rem，可以方便計算；
因為是640px所以應限制下頁面的大小，所以最外層的盒子應該是：
1
2
3
4
5
position: relative;
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
轉至：
手機端頁面自適應解決方案 rem布局
相信很多剛開始寫移動端頁面的同學都要面對頁面自適應的問題，當然解決方案很多，比如 百分比布局，彈性布局flex 什麼是flex 也都能獲得不錯的效果，這裡主要介紹的是本人在實踐中用的最順手最簡單的布局方案 rem 什麼是rem 布局 rem布局非常簡單，首頁你只需在頁面引入這段原生js 就可以了 f...
移動端頁面自適應解決方案 rem布局
相信很多剛開始寫移動端頁面的同志們都要面對頁面自適應的問題，當然解決方案很多，比如 百分比布局，彈性布局flex 什麼是flex 也都能獲得不錯的效果，這裡主要介紹的是本人在實踐中用的最順手最簡單的布局方案 rem 什麼是rem 布局 rem布局非常簡單，首頁你只需在頁面引入這段原生js 就可以了 ...
手機端 自適應頁面rem
一 手機端自適應rem 1 樣式重置 定義字型大小 樣式重置這塊省略，大同小異 定義字型大小 media screen and min width 320px body media screen and min width 360px body media screen and min width ...