pc端自适应配置（pc端适配的方案有哪些） - 原点资讯

1像素问题

解决思路

使用 0.5px 。有局限性，iOS 8及以上，苹果系统支持，但是 iOS 8以下和 Android（部分低端机），会将0.5px 显示为 0px

既然 1 个 CSS 像素代表 2（DPR 为2）、3（DPR为3）物理像素，设备又不认识 0.5px 的写法，那就画 1px，然后想办法将宽度减少一半

方案

渐变实现 background-image: linear-gradient(to top, ,,,)
使用缩放实现 transform: scaleY(0.333)
使用图片实现 base64
使用 SVG 实现嵌入 background url
border-image 低端机下支持度不好

以上都是通过 CSS 的媒体查询来实现的

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {} @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) { }图片适配和优化

图像通常占据了网页上下载资源绝大部分，优化图像通常可以最大限度地减少从网站下载的字节数以及提高网站性能

通常可以，有一些通用的优化手段：为不同 DPR 屏幕提供最适合的图片尺寸

各大厂商的适配分析

看了不少文章，类似如：大厂是怎么做移动端适配的

各大厂，有用rem适配的、也有用vm适配的、也有vm rem结合适配的，纯用 px 方案的也有

新闻、社区等可阅读内容较多的场景：px flex 百分比如携程、知乎、TapTap
对视觉组件种类较多，依赖性较强的移动端页面：vw rem 如电商、论坛

总结

rem 方案，引入 amfe-flexible 库

设计：设计出图是 750 * 1334，设计切好图后，上传蓝湖，按照尺寸写 px。

开发：

使用 rem 方案引入 amfe-flexible 库安装 px2rem 之类的 px 转 rem 工具配置 px2rem在项目中写 px ，输出时是 rem适用任何场景
使用 vw 方案安装 px2vw 之类的 px 转 vw 工具配置 px2vw在项目中写 px，输出时是 vw适用任何场景
使用 px 方案该怎么样就怎么写，不过因为有设计规划，按钮的大中小尺寸固定、icon 的尺寸有标准、TabBar 的高度也是写死的，当一切都有标准后，写页面就方便了例如左边固定 100 * 50，右边 flex 布局左边固定 100 * 50，右边 calc(100% - 100px)（使用 CSS3 中的 calc 计算）

其他

caniuse 网站测试CSS属性与浏览器的兼容性问题

疑问

Q：为什么 H5 移动端UI库单位大都是用 px？这样不会有适配问题吗？

其实我们写好 px 后，如果项目采用 rem 写业务，引入 px2rem（已经六年没有维护了）即可转换。

在有赞 vant 库中，它对浏览器适配的介绍是：

Viewport 布局
Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位（vw、vh、vmin、vmax），推荐使用 postcss-px-to-viewport 进行转换
postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位
Rem 布局
如果需要使用 rem 单位进行适配，推荐使用以下两个工具：
postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
lib-flexible 用于设置 rem 基准值

demo 合集：线上demo

参考资料