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
参考资料- 前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
- Rem布局的原理解析
- 再谈Retina下1px的解决方案
- 再聊移动端页面的适配
- 如何在Vue项目中使用vw实现移动端适配
- 细说移动端 经典的 REM 布局 与 新秀 VW 布局