W3C home > Mailing lists > Public > www-style@w3.org > February 2017

Re: [css3-mediaqueries] min-width, max-width, & fractional-pixel widths

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 21 Feb 2017 09:54:56 -0800
Message-ID: <CAAWBYDBLN0Uj6WJEy+i=_ZT=kiWN_wOcHnLAPCWfRxumFMysew@mail.gmail.com>
To: Nick Levinson <nick_levinson@yahoo.com>
Cc: Simon Sapin <simon.sapin@exyr.org>, www-style list <www-style@w3.org>, Florian Rivoal <florian@rivoal.net>
On Mon, Feb 20, 2017 at 9:49 AM, Nick Levinson <nick_levinson@yahoo.com> wrote:
> I wonder if this solves the problem: If listing breakpoints from small to
> large, specify min-width but omit max-width. I saw this shown (not
> recommended but tangential to another point) at
> <https://zellwk.com/blog/responsive-typography/>, as accessed 2-18-17. I
> suppose if listing breakpoints from large to small, specify max-width but
> omit min-width. This would seem to yield a range from the first value to any
> value less than the second value even if fractional. Or would browsers be
> inconsistent in dealing with this? Like, would the omission of the second
> -width value cause an overlap in some browsers? Should the spec be more
> specific in supporting this solution to encourage inconsistent user agents
> to act mathematically consistently?

No, this solution works just fine, but it requires you to specifically
override everything you set in the "previous" media query, since all
"smaller" queries are still evaluating as true and applying.  It's
much easier and less error-prone to make your queries only apply to
the range they intend to actually style, except for the problem stated
here.

No need to do anything new, tho - as stated in earlier replies, MQ 4
has the solution to this (adding the <, >, <=, >= operators), it just
needs to be implemented.

~TJ
Received on Tuesday, 21 February 2017 17:55:49 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:06 UTC