移動端使用 rem 簡單操做

移動端仍是推薦使用 rem 吧

1. 引入下面 js 文件

 

 1 (function() {
 2   /**
 3    * 7.5=設計稿尺寸/100
 4    * css元素尺寸=設計稿元素尺寸/100;
 5    */
 6   var pageWidth = 750
 7   var change = 'orientationchange' in window ? 'orientationchange' : 'resize';
 8   function calculate() {
 9       var deviceWidth = document.documentElement.clientWidth;
10       if (deviceWidth < 320) {
11           deviceWidth = 320;
12       } else if (deviceWidth > pageWidth) {
13           deviceWidth = pageWidth;
14       }
15       document.documentElement.style.fontSize = deviceWidth / (pageWidth / 100) + 'px';
16       window.rem2px = function(rem) {
17           rem = parseFloat(rem);
18           return rem * deviceWidth / (pageWidth / 100);
19       }
20   };
21   if (window.addEventListener) {
22     window.addEventListener(change, calculate, false);
23   } else {
24       window.onchange = calculate
25   }
26   calculate();
27 })();

 

 

 

 

 

2. 將  pageWidth   改成設計圖寬度

 

3. rem 值 = 像素值 / 100

 

 

以上