rem进阶

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/DreamFJ/article/details/82015387

rem基准值的计算

• 基准值即html的font-size，可以根据视窗宽度来计算

rem数值计算与构建

• rem数值=想设置的px值/基准值

rem与scss结合使用

• 安装node-sass，在.scss文件中通过函数来计算
• eg

  • @function px2rem($px){
        $rem: 37.5px; /*iPhone6基准值*/
        @return ($px / $rem) + rem;
    }
    
    .hello{
        width:px2rem(100px);
        height:px2rem(100px);
        &.b{
            width:px2rem(50px);
            height:px2rem(50px);
        }
    }

    编译后能得到相应.css文件，里面的值都转换成相应的rem值了。

rem适配实践

• 可以去看慕课网的课程——移动web开发适配秘籍Rem