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
断点没有指定上限,所以覆盖了任何非移动的东西?
解决方案
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>
推荐阅读
- android - 为什么android操作系统有时会发送多个(不仅仅是一个)android.intent.action.EVENT_REMINDER广播?
- php - 在产品网格 WooCommerce 中显示带有价格的产品变体列表
- c# - 调用 DetectChanges() 时,外键属性不会自动更新
- excel - 如何根据多个条件中的任何一个取消隐藏行?
- c# - 如何从表达式树中设置属性值?
- spring-boot - 如何通过 application.yaml 传递的参数禁用和启用 Spring Boot KeyCloak 配置?
- curl - 正确使用 Appnexus API
- android - 无法正确限制文本
- node.js - 无法使用 node.js 和 mongoose 从 mongoDB 获取数据
- git - 带有 GUI 的 Git 私人设置服务器,其中包括 GitHub 的功能