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

css media query 是左包含,右包含,还是左右包含?

  •  
  •   Tianpu · 2016-04-30 09:33:48 +08:00 · 2543 次点击
    这是一个创建于 2889 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如:
    @media (min-width:720px) and (max-width:960px) {

    }

    看起来似乎是左右包含,上述应该是[720,960] 包含 720 960 两个宽度,确如此乎?
    FlowMEMO
        1
    FlowMEMO  
       2016-04-30 12:22:56 +08:00   ❤️ 1
    是包含的,不论左右
    Tianpu
        2
    Tianpu  
    OP
       2016-04-30 20:31:20 +08:00
    @FlowMEMO 多谢

    不得已有些地方使用了 719px 这样的表达来精确定位

    应该不存在半像素吧,比如 719.5 这样子的,目前似乎是缺失 (719,720)这个区间的

    主要是重置 css 太烦了,或者考虑下更好的复用方式
    FlowMEMO
        3
    FlowMEMO  
       2016-04-30 22:55:02 +08:00
    @Tianpu 考虑半像素的话就复杂了···这个就跟设备的 DPR(Device Pixel Ratio)有关了,比如 DPR 是 2 的设备把 css 中的 1px 渲染成物理上的 2px ,之前看过文章讲在 iPhone 上画 CSS 中 0.5px 也就是物理像素 1px 的线用的一些奇技淫巧
    Tianpu
        4
    Tianpu  
    OP
       2016-04-30 23:03:26 +08:00
    @FlowMEMO

    http://tzi.fr/css/prevent-double-breakpoint

    这里貌似有比较多的讨论

    其实影响到的应该很少,我暂时用这种方法好了

    按说左右包含应该有比较明确的定义才对
    Tianpu
        5
    Tianpu  
    OP
       2016-04-30 23:11:03 +08:00
    这个问题叫 sub-pixel ,对应的 720px 这样的位置点叫 break point

    ie8+ chrome sarafi 这几个明确使用 "round up"方式,也就是四舍五入
    firefox 使用真实像素


    http://stackoverflow.com/questions/28101478/media-query-lost-in-firefox-when-window-resized-to-max-width-minus-scrollbar-wid
    https://www.palantir.net/blog/responsive-design-s-dirty-little-secret
    FlowMEMO
        6
    FlowMEMO  
       2016-04-30 23:16:55 +08:00
    @Tianpu 用来限制元素宽度的 min-width 和 max-width 是有明确定义 https://www.w3.org/TR/CSS2/visudet.html#min-max-widths. 那篇文章里主要讨论的是相对大小,感觉你这么写针对 px 应该就够用了.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3266 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 14:11 · PVG 22:11 · LAX 07:11 · JFK 10:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.