问题
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?
回答1:
Looking at the scss that is provided with Foundation you could use the grid-column mixin as part of your compiled css.
Below is a snippit from the _grid.scss, however instead of including the @include in a media query you would just wrap it with your .slim class.
// 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)
Link to Grid.scss on github
来源：https://stackoverflow.com/questions/13742991/toggle-mobile-view-in-foundation-using-css-class-or-js