V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
caopi
V2EX  ›  问与答

现在移动端都不设置 dpr 是为什么呢?

  •  
  •   caopi · 2019-01-16 11:24:09 +08:00 · 4732 次点击
    这是一个创建于 2142 天前的主题,其中的信息可能已经有所发展或是发生改变。

    以前的移动端适配文章都说根据 dpr 设置 scale 缩放,但是我发现很多 Git 的项目都没有 scale 缩放。

    即使不考虑 1px 问题,但是也不考虑位图像素不够分而产生模糊了吗?

    15 条回复    2019-01-16 14:41:38 +08:00
    Barroco
        1
    Barroco  
       2019-01-16 11:32:04 +08:00
    看到 1px 问题应该是 web 前端吧。
    现在都基本默认 2x 或者 3x,能覆盖多数场景。
    布局靠 vw vh 或者别的方案,靠工具转换。

    git 上都不是大型生产项目,个人、开源项目还是讲究精巧优雅的。
    实际上大厂生产项目里还是对这些做了一些比较脏的兼容。
    caopi
        2
    caopi  
    OP
       2019-01-16 11:36:04 +08:00
    @Barroco 默认 2x 和 3x ?是直接设置 meta 里的 scale 为 2 吗?
    Barroco
        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
    caopi
        4
    caopi  
    OP
       2019-01-16 11:47:13 +08:00
    @Barroco 先 rem?是指 rem 设置为 10vw ?
    caopi
        5
    caopi  
    OP
       2019-01-16 11:48:36 +08:00
    @Barroco 就是 HTML 字体设置为 vw 然后,再使用 postcss 转换 px 为 rem 吗?还直接 postcss 转 vw
    Barroco
        6
    Barroco  
       2019-01-16 11:57:02 +08:00
    @caopi 啊? CSS 里全部都是 px,靠 postcss 转

    规则是针对非 font 相关,先 rem,覆盖一条 vw
    font 就不用覆盖了,这样开启中老年字号的用户还能用大字报浏览
    caopi
        7
    caopi  
    OP
       2019-01-16 13:41:30 +08:00
    @Barroco 哦,谢谢。最后再问一下。不使用 scale 的话指的是(width=device-width,initial-scale=1)的设置吧,那么视口还是 1x 的,2x 的设计稿写的 px 通过 postcss 转换出来的宽度还是 device-width 的宽度吗?如果还是 device-width 的话,岂不是还是和物理像素一对多,产生模糊吗
    Barroco
        8
    Barroco  
       2019-01-16 13:46:35 +08:00
    @caopi 会转成 rem 或者 vw 啊,你就把他们当做百分比,scale 是多少都没关系呀
    rabbbit
        9
    rabbbit  
       2019-01-16 13:46:58 +08:00
    设计稿 2x,切出来的图片 2x 3x,写网页的时候按 1x 写,根据 min-device-pixel-ratio 判断载入 2x 还是 3x 的图片
    66beta
        10
    66beta  
       2019-01-16 13:50:55 +08:00 via Android
    楼主去看下大漠的文章
    caopi
        11
    caopi  
    OP
       2019-01-16 13:57:39 +08:00
    @66beta 求地址啊
    caopi
        12
    caopi  
    OP
       2019-01-16 14:01:46 +08:00
    @Barroco 哦,我有点搞混了,是这样吧,这个模糊只需要考虑图片的模糊是吧。我刚才搞错了,还以为整个页面都需要考虑 dpr 模糊的问题
    caopi
        13
    caopi  
    OP
       2019-01-16 14:05:22 +08:00
    @Barroco 我好像搞混了位图像素和 css 像素,就是 css 像素不会因为 dpr 不同产生模糊,而图片的位图像素会产生模糊,所以只要考虑 2x 图和 3 倍图的问题就行了
    66beta
        14
    66beta  
       2019-01-16 14:41:12 +08:00 via Android
    66beta
        15
    66beta  
       2019-01-16 14:41:38 +08:00 via Android
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1209 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 18:16 · PVG 02:16 · LAX 10:16 · JFK 13:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.