以前的移动端适配文章都说根据 dpr 设置 scale 缩放,但是我发现很多 Git 的项目都没有 scale 缩放。
即使不考虑 1px 问题,但是也不考虑位图像素不够分而产生模糊了吗?
1
Barroco 2019-01-16 11:32:04 +08:00
看到 1px 问题应该是 web 前端吧。
现在都基本默认 2x 或者 3x,能覆盖多数场景。 布局靠 vw vh 或者别的方案,靠工具转换。 git 上都不是大型生产项目,个人、开源项目还是讲究精巧优雅的。 实际上大厂生产项目里还是对这些做了一些比较脏的兼容。 |
3
Barroco 2019-01-16 11:44:16 +08:00 1
@caopi
是图片直接 2x 3x 其它靠 vw vh 这些动态单位 说点兼容的 Android 部分机型不能用 scale,会出现奇怪的问题 不再建议布局使用 rem,因为会受到机型设置字号导致布局崩掉 但是文字不能用 vw vh 所以一般就是设计稿 2x,对着设计稿写 px,然后用 postcss 插件编译 先 rem,然后覆盖一条 vw,但是 font 相关属性不覆盖,再判断是否要载入 flexiblejs |
5
caopi OP @Barroco 就是 HTML 字体设置为 vw 然后,再使用 postcss 转换 px 为 rem 吗?还直接 postcss 转 vw
|
6
Barroco 2019-01-16 11:57:02 +08:00
|
7
caopi OP @Barroco 哦,谢谢。最后再问一下。不使用 scale 的话指的是(width=device-width,initial-scale=1)的设置吧,那么视口还是 1x 的,2x 的设计稿写的 px 通过 postcss 转换出来的宽度还是 device-width 的宽度吗?如果还是 device-width 的话,岂不是还是和物理像素一对多,产生模糊吗
|
9
rabbbit 2019-01-16 13:46:58 +08:00
设计稿 2x,切出来的图片 2x 3x,写网页的时候按 1x 写,根据 min-device-pixel-ratio 判断载入 2x 还是 3x 的图片
|
10
66beta 2019-01-16 13:50:55 +08:00 via Android
楼主去看下大漠的文章
|
12
caopi OP @Barroco 哦,我有点搞混了,是这样吧,这个模糊只需要考虑图片的模糊是吧。我刚才搞错了,还以为整个页面都需要考虑 dpr 模糊的问题
|
13
caopi OP @Barroco 我好像搞混了位图像素和 css 像素,就是 css 像素不会因为 dpr 不同产生模糊,而图片的位图像素会产生模糊,所以只要考虑 2x 图和 3 倍图的问题就行了
|
14
66beta 2019-01-16 14:41:12 +08:00 via Android
|
15
66beta 2019-01-16 14:41:38 +08:00 via Android
|