#css #responsive-design #media-queries #tachyons-css
#css #адаптивный дизайн #медиа-запросы #tachyons-css
Вопрос:
Использование библиотеки tachyons css:
Я не понимаю, как ns работает точка останова. Согласно документам, точки останова определяются как:
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) ]
Думал, что следующий код обеспечит видимость только одного div в зависимости от ширины.
<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>
Тем не менее, точка ns останова также появляется в medium точках останова и large останова.
мобильная точка останова, это значение по умолчанию
Это потому ns , что точка останова не указывает верхнюю границу и поэтому охватывает все, что не является мобильным?
Комментарии:
1. Да, все, что имеет ширину 30em или выше, будет выполнять настройки в медиа-запросе ns. Это просто говорит не маленький.
Ответ №1:
точка останова ns означает, что класс будет применяться ко всем размерам, которые не являются маленькими (min-width: 30em // только мобильные устройства будут иметь ширину ниже 30em, поэтому ns будет работать на планшетах, настольных компьютерах, устройствах с большой шириной дисплея)
<!---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>