rem布局

作者: 果汁密码 | 来源:发表于2018-04-17 08:53 被阅读28次

    rem:当前页面中rem单位的样式值都是针对于html元素的font-size的值进行动态计算的;通常情况下设置根元素的font-size为100px,这样方便计算,chrome浏览器的最小font-size值为12px所以设置成10px会有误差。
    rem响应式布局页面只在移动端访问,所以不做低版本浏览器的兼容。

    html {
           font-size:100px; /*1rem=100px*/
    }
    div{
          width:1rem;
          height:1rem;
          background:red;
    }
    

    完全按照设计稿的尺寸(转换成rem)来写样式,按照设计稿的宽度、高度、字体大小、margin、padding的值来写。
    根据当前屏幕的宽度和设计稿的宽度动态计算html的font-size的值:

    // desW 设计稿尺寸  winW屏幕尺寸
    ~ function (desW) {
            let winW = document.documentElement.clientWidth
            let n = winW / desW
            document.documentElement.style.fontSize = n * 100 + 'px'
        }(750)
    

    相关文章

      网友评论

        本文标题:rem布局

        本文链接:https://www.haomeiwen.com/subject/kywlkftx.html