[移动端WEB] 移动端网站响应式布局之"rem"，CSS3 rem使用方式 

 1 (function(doc, win) {
 2 
 3                 var docEl = doc.documentElement,
 4                     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 5                     recalc = function() {
 6                         var clientWidth = docEl.clientWidth;
 7                         if(!clientWidth) return;
 8                         //                        if(clientWidth>=640){
 9                         //                            docEl.style.fontSize = '100px';
10                         //                        }else{
11                         //                            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
12                         //                        }
13                         docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
14                     };
15 
16                 if(!doc.addEventListener) return;
17                 win.addEventListener(resizeEvt, recalc, false);
18                 doc.addEventListener('DOMContentLoaded', recalc, false);
19             })(document, window);

1.根据设计图的大小修改图中的值。当前为 640 ，然后使用的rem值就为设计图的值/100为rem的值

当然也可以用媒体查询当然有点复杂

 1 $sjt_whdth:640;
 2 
 3 @media (min-width: 320px) {
 4     html {
 5         font-size:100px*(320/$sjt_whdth) ;
 6         
 7     }
 8 }
 9 
10 @media (min-width: 360px) {
11     html {
12         font-size: 100px*(360/$sjt_whdth);
13     }
14 }
15 
16 @media (min-width: 375px) {
17     html {
18         font-size: 100px*(375/$sjt_whdth) ;
19     }
20 }
21 
22 @media (min-width: 414px) {
23     html {
24         font-size: 100px*(414/$sjt_whdth) ;
25     }
26 }
27 @media (min-width: 765px) {
28     html {
29         font-size: 100px*(765/$sjt_whdth) ;
30     }
31 }
32 
33 @media (min-width: 1020px) {
34     html {
35         font-size: 100px*(1020/$sjt_whdth) ;
36     }
37 }
38 @media (min-width: 1280px) {
39     html {
40         font-size: 100px*(1280/$sjt_whdth) ;
41     }
42 }
43 
44 @media (min-width: 1360px) {
45     html {
46         font-size: 100px*(1360/$sjt_whdth) ;
47     }
48 }
49 @media (min-width: 1600px) {
50     html {
51         font-size: 100px*(1600/$sjt_whdth) ;
52     }
53 }
54 @media (min-width: 1920px) {
55     html {
56         font-size: 100px*(1920/$sjt_whdth) ;
57     }
58 }

 

1.小编习惯scss写css了所以里面会有算法，实际上是不可以的

2.这里的320px 下的0.5px是什么呢？？  0.5是320/640的值。用当前宽度/设计图宽度 ，其中px只是一个单位

 

posted @ 2017-08-11 11:20  熊一乐  阅读(819)  评论(0)  编辑  收藏  举报