2

I am trying to toggle the mobile view for foundation framework.

I found the relevant section of css in the foundation.css file...

@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%; }
}

And I copied the contents out, prefixing every selector (including the ones after comma - as in not at the start of the line) with a new class (I called 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%; }

I can now toggle the mobile view by adding or removing the slim class to the html tag. This is exactly what I want to do - and I like that it works with css (set server side) or javascript (so can be toggled client side by any trigger).

However, I hate that I have had to duplicate everything. Is there a way I can make this work without duplication?

Is it possible to alter @media selectors with javascript for example, or to make the @media container or .slim container apply contained styles?

Is there a better way?

4

1 に答える 1

0

Foundation で提供される scss を見ると、コンパイル済み css の一部として grid-column mixin を使用できます。

以下は _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 に答える