avatar

目錄
移动端适配方案

移动端自适应布局配置 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
    } 
    
    <!--0-->
    

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

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

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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. 总结

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


原文链接:

文章作者: Dylan
文章鏈接: https://www.faithlch.com/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%80%82%E9%85%8D%E6%96%B9%E6%A1%88.html
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 Dylan He
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論