Как вы ориентируетесь на разные ориентации в сетчатых классах, основанных на html-базе Zurb?

Question

Этот вопрос касается только прототипирования; Я знаю, что это можно сделать с помощью семантических сеточных классов через (S) CSS, но я имею в виду неземные классы grid-классов Zurb Foundation.

Я пытаюсь сделать что-то подобное - почему это не работает?

<div class="medium-portrait-4 medium-landscape-7">...</div> 
<div class="medium-portrait-8 medium-landscape-5">...</div> 

Answer 1

По v5.3.0 Zurb Foundation Там не из класса упаковки для нацеливания ориентации непосредственно, например, как вы описали выше.

Однако, используя mixins, можно создать пользовательский класс, который обеспечивает желаемый результат, такой как следующий пример, который я скопировал из a similar question on the foundation site.

.class-name { 
    @media #{$small-only} and (orientation: portrait) { 
    @include grid-column(2); 
    } 
    @media #{$small-only} and (orientation: landscape) { 
    @include grid-column(4); 
    } 
@media #{$medium-up} and (orientation: landscape) { 
    @include grid-column(6); 
    } 
} 

Answer 2

Чтобы сделать это, я изменить точки останова в _settings.scss:

small: 0, 
medium: 750px, 
large: 970px, 
xlarge: 1170px, 
xxlarge: 1440px, 

когда я использую небольшой COL для мобильных устройств, среды COL для планшета портрета, большой Col для планшетный ландшафт

его работа