rem的基准字体大小的设置

1.移动端 UI 给的设计稿一般是640px、720px、750px的宽度,可是咱们要作适配,兼容不一样的终端,rem布局是比较经常使用的一种方式,比较关键的是肯定根节点的字体大小。布局

这里以640px为例,用代码写一下:字体

 1 window.onresize = function(){
 2     var maxWidth = document.documentElement.clientWidth;
 3     if(maxWidth > 640){
 4         maxWidth = 640;
 5     }
 6     document.documentElement.style.fontSize = ((maxWidth / 640) * 16) + 'px';
 7 };
 8 var maxWidth = document.documentElement.clientWidth;
 9 if(maxWidth > 640){
10     maxWidth = 640;
11 }
12 document.documentElement.style.fontSize = ((maxWidth / 640) * 16) + 'px';

在使用的时候,能够将这个部分放在一份单独的文件夹中,命名为fontSize.js,也比较好区分于别的js文件。flex

若是你的设计稿是别的尺寸的,能够将咱们上述fontSize.js中的640修改成本身设计稿的宽度的实际尺寸。spa

移动端的最小尺寸通常是320px,最大尺寸为设计稿的尺寸,上面咱们得出的是1rem的值。插件

2.flexible.js插件也能够解决一样的问题,使用起来也很简单、方便,有兴趣的同窗本身了解一下,有时间跟你们再分享一下这个flexible.js插件。设计

相关文章
相关标签/搜索