1

Using tachyons css library:

I don't understand how the ns breakpoint works. According to the docs the breakpoints are defined as:

Media Query Extensions:
  -ns = not-small [ @media screen and (min-width: 30em) ]
  -m  = medium [ @media screen and (min-width: 30em) and (max-width: 60em) ]
  -l  = large [ @media screen and (min-width: 60em) ]

Thought the following code will ensure only a single div's visibility depending on the width.

<div class="dn-ns dn-m dn-l">Mobile</div>
<div class="dn db-ns">Small</div>
<div class="dn db-m">Medium</div>
<div class="dn db-l">Large</div>

However, the ns breakpoint also appears to kicks in at medium and large breakpoints.

mobile breakpoint, it's default

ns and medium, both kicking in

ns and large, both visible

Is it because the ns breakpoint does not specify an upper bound and so covers anything not mobile?

ExtraInfo
  • 13
  • 4
  • Yes, anything with width 30em or above will do the settings in the ns media query. It’s simply saying not small. – A Haworth Nov 24 '20 at 06:13

1 Answers1

1

ns breakpoint means the class will apply to all the sizes which are not small that (min-width:30em // only mobile devices will have width below 30em, so ns will work on tablet, desktop, large display device widths)

<!---display: none on all devices which are not small(dn-m and dn-l are redundant here) --->
<div class="dn-ns dn-m dn-l">Mobile</div>
Viraj Singh
  • 1,951
  • 1
  • 17
  • 27