将 CSS 应用于属性和媒体查询答案

【问题标题】：Applying CSS to both attribute and media query将 CSS 应用于属性和媒体查询
【发布时间】：2014-06-06 19:35:21
【问题描述】：

您好，我有重复的 css 代码，我想将其应用于媒体查询以及 html 属性。

例如

@media only screen and (max-width 729px)
    font-size: 1.5em
    font-weight: normal
.mobile-view
    font-size: 1.5em
    font-weight: normal

我正在使用 SASS，想知道是否有办法将它们捆绑在一起以保持 DRY（不要重复自己）

【问题讨论】：

如果通过定位 HTML 元素来指定属性，则无需在媒体查询中再次指定它，除非您在 CSS 的其他地方专门覆盖了该属性。另外，不要忘记你的括号{ }
问题是 .mobile-view 不适用于桌面，因此媒体查询将启动。另外哈哈，我正在使用不需要括号的 sass :)跨度>
我的意思是，如果.mobile-view类只在媒体查询处于活动状态时适用，为什么要在两个地方指定相同的值？
您不能将属性应用于媒体查询。媒体查询（既不是@media at-rule）不是样式规则。您究竟想在哪里应用这些样式？也许如果你用示例 CSS 输出而不是你在 Sass 中尝试过的方式来表达它，它可能会更清楚。
好吧，我最终想要有两种观点。一个用于移动端，一个用于桌面端，只有桌面视图响应，这样当媒体查询条件命中时，它会应用与移动端视图相同的 css

标签： css sass media-queries dry

【解决方案1】：

你可以使用 mixin：

@mixin mobileFont() {
    font-size: 1.5em;
    font-weight: normal;
}
@media only screen and (max-width 729px){
    @include mobileFont();
}
.mobile-view{
    @include mobileFont();
}

但是它不会被渲染为 DRY...

【讨论】：

无论如何都不可能使输出 DRY，CSS 不允许。

【解决方案2】：

很遗憾没有。 Sass 期望嵌套项对应于父对象。因此，如果使用您的方法，它将编译为：

.parent @media only screen and (max-width: 729px) .mobile-view { 
    font-size: 1.5em;
    font-weight: normal
}

如果你想对多个元素进行分组，你可以这样做。

@media only screen and (max-width: 729px) {
    .item-one, 
    .item-two,
    .item-three .child {
        font-size: 1.5em;
        font-weight: normal;
    }
}

【讨论】：

我知道 Sass 有一种方法可以将 css 应用于多个属性。以.mobile-view, .desktop-view{ font-size: 1.5em; font-weight: normal} 为例，它将把 css 应用于这两个属性。但是，当我对@media 查询使用相同的策略时，它不起作用:(
如果你尝试过ddddd...@media screen and (max-width: 729px) { .desktop-view, .mobile-view { font-weight: normal; font-size: 1.5em; } }.
^ 这不会捕获很多移动设备保护套，例如 iPad 甚至视网膜显示器 iPad mini 或其他东西。他们不会点击媒体查询并且永远不会获得移动视图 css，因为（例如）iPad 的最大宽度大于 729px
如果您想专门为 iPad 设置它，您可以根据像素比率进行设置。话虽如此，如果您添加了 viewport 元标记，它仍然可以工作。
hmmm 但是新的视网膜 ipad 的视口将默认为 1024x768 分辨率？我当然可以更改媒体查询以专门查找 ipad，但这有点遗憾，因为我已经可以根据 .mobile-view 属性判断。编辑：我承认我对视口元标记没有太多经验。我会研究一下，看看我是否可以在这里使用它。