rem+vw前端的页面自适应

前置知识： 

1. rem是相对于根元素也就是元素的字体大小的单位。

html { font-size: 12px; } 
p { font-size: 2rem; /*24px*/}

2. vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px
 

前端屏幕自适应方案：

通过改变根元素的字体大小，进而对页面进行等比例缩放，从而实现自适应。

1. 屏幕缩放比  = screenWidth / designWidth

2. 等比缩放后的元素大小 =  设计稿元素大小 * screenWidth / designWidth + 'px'

                      = 设计稿元素大小 / designWidth * screenWidth + 'px'

3. 令根元素字体大小为htmlFontSize = screenWidth = 100vw，

    则，等比缩放后元素大小 = 设计稿元素大小 / designWidth * htmlFontSize + 'px';

        等比缩放后元素大小 = 设计稿元素大小 / designWidth + 'rem';

 代码实现：

1. 设置根元素字体大小为屏幕宽度

html{
    font-size: 100vw;//屏幕宽度
}

 2. 用sass函数，将px转换为rem

将元素的px单位转为rem
@function px2rem($px) {
    $rem : 1920px;/**设计稿宽度**/
    @return ($px/$rem) + rem;
}

3. 使用

div元素设计稿宽度是100px，使用px2rem进行等比缩放。

div{
    width: px2rem(100px)
}