【发布时间】：2012-11-24 10:41:02
【问题描述】：
我正在尝试切换基础框架的移动视图。
我在foundation.css文件中找到了css的相关部分...
@media only screen and (max-width: 767px) {
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
.column, .columns { width: auto !important; float: none; }
... more code here ...
.push-three-mobile { left: 75%; }
.pull-three-mobile { right: 75%; }
}
然后我复制了内容，在每个选择器（包括逗号之后的选择器 - 不是在行首）添加了一个新类（我称为slim）。
.slim body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.slim .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
.slim .column, .slim .columns { width: auto !important; float: none; }
... more code here ...
.slim .push-three-mobile { left: 75%; }
.slim .pull-three-mobile { right: 75%; }
我现在可以通过将slim 类添加或删除到html 标记来切换移动视图。这正是我想要做的 - 我喜欢它与 css（设置服务器端）或 javascript（因此可以通过任何触发器切换客户端）一起使用。
但是，我讨厌我不得不复制所有内容。有没有办法让我不重复地完成这项工作？
是否可以使用 javascript 更改 @media 选择器，或者使 @media 容器或 .slim 容器应用包含的样式？
有没有更好的办法？
【问题讨论】：
-
好问题。我还没有看到本地 css 方法来做到这一点。您不喜欢代码大小的重复 cos 或 Ctrl+C Ctrl+V 工作吗？ Css 预处理器（例如lesscss.org）可以帮助解决第二个问题。代码看起来像
@media only screen and (max-width: 767px), .slim { body { ... more code here ... }} -
我不喜欢复制，因为文件更大（尽管压缩后几乎没有区别），但主要是因为它变得需要管理。如果我有一个更改一两行代码的解决方案，我很有可能会制作一个补丁，以便在每次更新基础时应用。如果我必须复制和粘贴整个块 - 这可能意味着每次更新基础时都要手动编辑，因为它们很可能一直在更改该部分的部分内容。感谢 LESSCSS 的建议。
-
我会考虑的。我确实尝试过使用构建脚本作为基础，但发现它对我的需要来说过于复杂，所以想避免它。这将允许我添加您在评论中添加的一个衬里，作为一站式解决方案。谢谢。
-
没问题。感谢您的投票:)
标签： javascript html css media-queries zurb-foundation