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

[sisterAn]

[Jsmond2016]

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

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

缺点：

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

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

[zeroone001]

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

[shengdan19]

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

[mraing]

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

[sphenginx]

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

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

[z-juln]

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

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

[jackluson]

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

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

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