移动端自适应布局配置 vw + rem

当我们写移动端页面时,会遇到自适应和兼容性等方面的问题,单纯的l指示利用rem或者vw/vh都不尽人意,有幸看见大神的设计思路,感觉很厉害,由此记录学习~


1. 原理

1.1 rem布局与vw/vh

  • rem:相对于根元素html的字体大小的单位

  • rem布局原理:根据屏幕分辨率的不同,动态修改根字体的大小,让所有用rem为单位的元素跟着屏幕尺寸一起缩放,从而达到自适应的效果。

  • 例如:宽度为750px的设计稿,尺寸可以这样设定

  • html {
        font-size: calc(100vw / 7.5);//除以的7.5是根据设计稿的屏幕宽度来定的,这样750px宽度下根元素字体大小则为750px/7.5=100px=1rem
    } 
    
    

    #### 1.2 设计思路

    * **根据设计稿将html的gont-size设置为100px;比如750px的设计稿就除以7.5。此时100px=1rem,后续计算起来会方便很多。**

    * > 以上设计思路的**最大优点**就是:**方便计算**。

    ### 2. 优化

    #### 2.1 重置默认字体

    **考虑到不改变浏览器默认字体大小的展示,因此要重置页面页面字体大小为浏览器默认的大小**

    ```css
    html {
    font-size: calc(100vw / 7.5);
    }

    #app {
    font-size: initial; //重置页面字体大小恢复为浏览器默认16px,否则就显示成50px了
    }

    #### 2.2 限制根元素字体大小的最大值、最小值

上面的设计的页面虽然看起来适配得很好,但是你会发现它会无限制放大,在大屏上很不好看。可以通过给根元素字体大小限制最大最小值,以及 body 也增加最大最小宽度限制,这样就可以改善用户体验了。

html {

//设置根字体大小单位为vw,页面元素的尺寸单位都设为rem,搭配vw和rem,可实现布局根据视口变化而变化
font-size: calc(100vw / 7.5);
// 同时,通过Media Queries 限制根元素字体最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}


// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
max-width: 540px;
min-width: 320px;
}

#app {
font-size: initial;
}


3. 总结

该设计方法简介方便,增加了最大最小宽度的限制,用户视觉体验更好。


原文链接: