移动端使用 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

 

 

以上

 

posted @ 2019-04-17 17:49  blackbentel  阅读(507)  评论(0)  编辑  收藏  举报