2

我正在尝试切换基础框架的移动视图。

我在文件中找到了css的相关部分foundation.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容器应用包含的样式？

有没有更好的办法？

4

1 回答 1

0

查看 Foundation 提供的 scss，您可以使用 grid-column mixin 作为编译后的 css 的一部分。

下面是来自 _grid.scss 的一个片段，但是不是将 包含@include在媒体查询中，您只需将其与您的.slim类一起包装。

// For creating columns - @include these inside a media query to control small vs. large grid layouts
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true)

链接到 github 上的 Grid.scss

于 2013-06-27T12:10:40.960 回答