rem适配的用法

在我们开发过程中,常需要对屏幕进行适配.rem就是常用的方式之一. 原理:控制html根标签的字体大小,来进行控制整个网页元素的大小 具体使用步骤: 1:若是有兼容移动端,需要加入meta标签(完美视口) 2:用js监控屏幕大小,且将生成的字符串添加到head标签中,代码如下

            !(function(){
                  var width = document.documentElement.clientWidth;
                  var styleNode = document.createElement('style');
                  styleNode.innerHTML = 'html{font-size: '+ width/8 +'px !important;}';
                  document.head.appendChild(styleNode);
            })();

3使用css预编译器定义变量 值为 你图纸的宽度除以你分屏的分数,.比如:

图纸大小宽度是1336(高度一般不需要进行适配)需要在1920的屏幕上进行显示.可以将图纸分为8份,那么图纸的宽度九尾8rem,那么图纸的1rem等于167px,那么就可以在你的混合上定义这个变量,那么每次计算图纸上的宽度时,就可以使用这个宽度除以你定义的变量就可以得到真正显示在你1920屏幕上的值了,比如你定义的变量为@rem=167rem(注意,167rem是一个变量),图纸有一个宽度为60px的,那么就是width:60/@rem;

欢迎留言!