移动端适配问题

本人以前使用移动端适配的思路是，基于一个设计稿，比如设计稿宽度是 750 px ，我在做移动端适配将 750 px分成100份，每份 7.5 px ， 1vw 等价 7.5 px。100px / 7.5 约等于 13.34 份 (vw)。然后我手动设置 meta 标签让 content 属性为设备的宽度 width=device-width (不使用默认的980)，然后让默认缩放为1.0并且不允许用户缩放。这样通过将设计稿划分比例然后结合 calc 函数来做适配，比如设备稿中有个元素是 100px*100px ，那我就 calc(100vw / 7.5) 约等于 13.34vw , 13.34(份)*7.5(每份7.5px) 约等于 100 px。

我想问的问题是这样的适配移动端的方案，从功能上讲有没有问题？

慕粉3946981 2024-01-14

源自：Vue3项目框架搭建及响应式开发方案 3-3 [扩展]移动端适配方案viewport

收起

1回答

Brian 2024-01-14 23:18:58

我仔细的看了一下

这个跟rem的思路差不多，优点可以保持设计的一致性，多屏方案是一样的。减少了媒体查询，适应性会更强。

缺点是什么？

缺点1：老旧的浏览器vw单位可能有点问题；

缺点2：在某些屏幕尺寸上无法完全精确匹配设计稿的尺寸，尤其是当设计要求非常精确时，比如0.5px？

缺点3：你的字体你打算怎么设置？

缺点4：布局复杂性，对于一些复杂的布局，仅依靠vw进行适配可能不够，可能需要结合其他单位或方法来实现更复杂的布局需求。

收起回答

提问者慕粉3946981 #1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
font-size: calc(12vw / 7.5);
/* font-size: 12px; */
}
.box2 {
height: calc(0.5vw / 7.5);
/* height: 0.5px; */

background-color: red;
}
</style>
</head>
<body>
<div class="box1">font size</div>
<div class="box2">1px height</div>
</body>
</html>

2024-01-15 00:34:45
提问者慕粉3946981 #2
1. 如果不支持vw单位那就没有办法
2. 我这边亲测谷歌浏览器，可以基于vw设置 0.5 px 的尺寸
3. 字体一样
4. 这个东西有个好处就是不用动脑筋算，直接无脑 vw + calc
2024-01-15 00:40:17
Brian 回复提问者慕粉3946981 #3
那你可以结合scss的函数，做一个函数的封装，类似：
```
@function calculate-vw($value) {
  @return ($value * 1vw) / 7.5;
}
```
2024-01-15 23:29:25