rem+vw前端自适应

rem是相对于根元素也就是<html>元素的字体大小的单位。通过改变根元素的字体大小,进而对页面进行等比例缩放,从而实现自适应。

vw是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px,那么1vw = 18px
html{
    font-size: 100vw;//屏幕宽度
}
将元素的px单位转为rem
@function px2rem($px) {
    $rem : 1920px;/**设计稿宽度**/
    @return ($px/$rem) + rem;
}
上一篇:移动端的适配方案


下一篇:一分钟学会H5手机适配