我正在学习CSS,我遇到了一个具有以下代码的示例:
<body> <a href="#" class="CardLink CardLink_Hearts">Hearts</a> <a href="#" class="CardLink CardLink_Clubs">Clubs</a> <a href="#" class="CardLink CardLink_Spades">Spades</a> <a href="#" class="CardLink CardLink_Diamonds">Diamonds</a> </body>
和css:
.CardLink { display: block; color: #666; text-shadow: 0 2px 0 #efefef; text-decoration: none; height: 2.75rem; line-height: 2.75rem; border-bottom: 1px solid #bbb; position: relative; } @media (min-width: 300px) { .CardLink { padding-left: 1.8rem; font-size: 1.6rem; } .CardLink:before { display: block; } } .CardLink:before { display: none; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .CardLink_Hearts:before { content: "❤"; } .CardLink_Clubs:before { content: "♣"; } .CardLink_Spades:before { content: "♠"; } .CardLink_Diamonds:before { content: "♦"; } /*@media (min-width: 300px) { .CardLink:before { display: block; } }*/
这个想法是当视口大小低于300px时,不显示卡图标,否则显示它们.
我正在玩代码,我无法理解为什么我们必须两次定义@media(min-width:300px)才能使代码按预期工作.
为什么我们不能只将代码放在css的最后一段到媒体屏幕大小所属的部分(良好的代码重用而不是再次声明)?
谁能解释一下?检查plunker,这按预期工作:https://plnkr.co/edit/MJAPdkgUegpUlJnkcQHg?p=preview
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。