移动端响应式适配
•
# 移动端响应式适配
移动端设备有不同的像素、屏幕宽高比，设计师希望设计稿能在各种不同的手机上保持一致的显示效果，比如一行能显示多少文字在所有机型上应该是一致的。大部分移动端适配都是按照屏幕的宽度等比的放大、缩小。
Demo
- CodeSandebox https://codesandbox.io/p/github/lbb00/vw-rem-demo/master
- GitHub https://github.com/lbb00/vw-rem-demo
## vw
vm，vh 是 CSS3 中的一个相对长度单位，相对于视口的宽度。 视口被均分为 100 份，那么 1vm 的尺寸就是视口宽度的百分之一。需要注意的是，在移动端，视口可能受工具栏、标题栏的的影响（详见参考文章）。
例如：设计师在 375px 的设计稿上，字体大小 14px，对应为 vw 布局应该为 100 / 375 * 14 ，大约 3.73vw。
这种手动计算过于麻烦，通常使用 postcss 配合插件实现，如 `postcss-px-to-viewport`。
```json
{
"postcss-px-to-viewport": {
"unitToConvert": "px",
"viewportWidth": 375,
"viewportHeight": 1334,
"unitPrecision": 3,
"viewportUnit": "vw",
"fontViewportUnit": "vw",
"selectorBlackList": [".ignore"],
"minPixelValue": 1, // ios 对于小于 1px 的 border 不显示
"mediaQuery": false
}
}
```
这种配置还不够完美，如果用户使用 PC 或比较宽的屏幕访问，受宽度等比放大影响，页面上的元素会变得巨大。观察京东、拼多多的移动端网页就会发现，在 PC 端仍然能保持居中有良好的访问体验。
## vw + rem
这种方案是将之前的 rem 和 vw 混合使用。将 px 转化为 rem，通过`@media`对 html、body 的 font-size 调整，从而使缩放宽度可以随心控制。
- 处于移动端时将 font-size 设置为 100vw 根据屏幕宽度自动缩放。
- 处于 PC 端时写死 html 上的 font-size，固定缩放的宽度。
css 样式
```css
html {
font-size: 1vw;
}
body {
background: #fff;
font-size: 14px;
}
@media screen and (min-width: 900px) {
html {
font-size: 7.5px;
height: 100%;
background: #f4f4f4;
}
body {
max-width: 750px;
min-height: 100%;
margin: 0 auto;
}
}
```
postcss 配置为
```json
{
"postcss-px-to-viewport": {
"unitToConvert": "px",
"viewportWidth": 750,
"viewportHeight": 1334,
"unitPrecision": 3,
"viewportUnit": "rem",
"fontViewportUnit": "rem",
"selectorBlackList": [".ignore"],
"minPixelValue": 1, // ios对于小于1px的border不显示
"mediaQuery": false
}
}
```
## 参考
[1] [大漠 | 分享手淘过年项目中采用到的前端技术](https://juejin.cn/post/6844903567715729421)
[2] [The large, small, and dynamic viewport units](https://web.dev/viewport-units)
[3] https://ishadeed.com/article/new-viewport-units/