第 201 题：项目怎么做的移动端适配？

Question

几个重要的关键词：

• CSS 像素：代码中使用的逻辑像素，衡量页面，上的内容大小
• 设备像素：即物理像素，控制设备显示的单位，与设备、硬件有关
• 设备独立像素：与设备无关的逻辑像素，不同于设备像素(物理像素)，不是真实存在的。
• 设备像素比：定义设备像素与设备独立像素比的关系 window.devicePixelRatio 设备像素比=物理像素/设备独立像素
• 分辨率：指的是屏幕.上垂直和水平的总物理像素

Answer 1

一种最简单的适配方法, 设置meta信息 width=375 , 375是你设计稿的宽度, 注意不能设置scale

<meta name="viewport" content="width=375, user-scalable=no, minimal-ui, viewport-fit=cover">

这样直接用px单位, 页面也会跟踪适配了

Answer 2

px转rem，安卓上圆会变成椭圆。除了不让他转rem还有其他方法吗？

border-radius吗，这个没必要用rem吧...

Answer 3

px转rem，安卓上圆会变成椭圆。除了不让他转rem还有其他方法吗？

可以试试 长宽翻倍，然后用 transform: scale() 来缩小

Answer 4

以前使用过媒体查询，流性布局，flex 布局之类的去适应移动端。但是我发现最好的方案，还是弄两套方案，PC端一套，移动端一套。虽然代码会改动很多，但是用户体验却舒服不少。

Answer 5

px转rem，安卓上圆会变成椭圆。除了不让他转rem还有其他方法吗？

Answer 6

我们是rem + px + flex来整体实现的； 不能全部使用rem, 需要分情况使用

Answer 7

之前开发的时候特意了解过，大概如下：

• 完全百分比方案（不建议使用）
• 媒体查询 + 不同设备不同css （代码工作量大）
• rem 方案（根元素字体大小作为参考值）
• vw/vh 方案（屏幕宽高作为参考值）
• flex 弹性布局方案

缺点：

• 采用字体大小或者屏幕宽高作为参考值计算出来的 px，可能存在无限小数，而 px 表示的最小精度是有限的，因此可能导致细微像素差异
• flex 弹性布局方案，盒子宽高有内容撑开，内容由px定宽，屏幕大小变化，盒子宽度不变，整体排布不变，但是盒子之间的缝隙可能改变。此方案若 ui 能够接受即可

以上是个人看法，若有不对，感谢指正