undefined media queries of screen size under 30em on tachyons.css about tachyons HOT 5 OPEN

It's because the base classes are mobile by default, following the mobile-first architecture. You already "start" below 30em and then progress upwards. But be aware of #578.

from tachyons.

Hi @cristianofromagio,

My mobile phone have a screen width less than 30em.
All of media queries on tachyons.css do not affect my mobile phone.
"screen and (min-width: 30em)" means screen width MORE than 30em.

tachyons.css said the following,

• screen size < 30em
  No effect.
• 30em < screen size < 60em
  Effect '@media screen and (min-width: 30em) and (max-width: 60em)'
• 60em < screen size
  Effect '@media screen and (min-width: 60em)'

I strongly insist that "@media screen and (min-width: 30em)" is corrected to "@media screen and (max-width: 30em)".

from tachyons.

All of media queries on tachyons.css do not affect my mobile phone.

Yes, that is intended. On a mobile-first approach you don't need a media query to target a small device, it's by default applied to it as the base.

But if you have a layout created for a desktop view and now need to adapt it for mobile view, then you need to use max-width. Either way, media queries should be viewed as "adaptations". Whatever approach you use (mobile-first or not) the base classes you use are always going to be applied to the element, unless if overwrite by the media-query declarations ("adaptation").

Take a look at the media-queries variables names for tachyons:

@custom-media --breakpoint-not-small screen and (min-width: 30em);
@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
@custom-media --breakpoint-large screen and (min-width: 60em);

When you apply a base class on a mobile-first architecture, you are already at "small". After 30em you are at "not small", between 30em and 60em you are at "medium" and after 60em you are at "large". Roughly, what the min-width rule says is "apply these classes if the screen size is X value or more" and what the max-width rule says is "apply these classes if the screen size is X value or less".

from tachyons.

Hi @cristianofromagio,

Now I am wondering that "breakpoint-not-small' never affected anything in spite of existence of "breakpoint-not-small".

• "small" as screen size < 30em
  No effect.
• "medium" as 30em < screen size < 60em
  Effect '@media screen and (min-width: 30em) and (max-width: 60em)'
• "large"" as 60em < screen size
  Effect '@media screen and (min-width: 60em)'

It looks you can remove ""breakpoint-not-small"" from tachyons.css.
If you would not remove it, you are misleading "breakpoint-not-small" is still alive.

from tachyons.

Breakpoints have been refactored here: #705

from tachyons.