susy, медиа-запросы и lt IE9

Мне было интересно, какие (если есть) прокладки вы используете, чтобы магические сетки правильно реагировали в SUSY в IE8 и под?

На неподдерживаемых сайтах я всегда использовал moderizr или прокладку от Google, и они работали должным образом. Я работаю над своим первым сайтом SUSY, и медиа-запросы для самого большого размера не срабатывают.

http://dev.apehangar.com


person Community    schedule 15.10.2012    source источник
comment
Лично я использую решение, основанное на этой концепции: jakearchibald.github.com/sass-ie   -  person cimmanon    schedule 15.10.2012
comment
Спасибо, кимманон. Я также только что попробовал response.js, и он тоже помогает. Все еще нужно работать над парой, т.е. только % ширины на нескольких контейнерах, но это не должно быть слишком сложно. Но еще раз спасибо, что нашли время!   -  person    schedule 15.10.2012


Ответы (1)


Мне непонятно, какую "прокладку" вы ищете. Я не знаю, как заставить MQ работать в IE8, но у Susy есть возможность стили вывода для резервного класса. Эти стили не будут реагировать динамически, но вы можете использовать их для отправки IE рабочего стола:

.page {
  width: 20em;
  @include at-breakpoint(30em 12 no-mediaqueries) {
    width: 70em;
  }
}

Выведет:

.page { width: 20em; }
@media (min-width: 30em) { .page { width: 70em; } }
.no-mediaqueries .page { width: 70em; }

Вы можете заменить «no-mediaqueries» любым резервным классом, который вы хотите. Просто убедитесь, что этот класс применяется с использованием условных комментариев Modernizr или IE.

person Miriam Suzanne    schedule 16.10.2012
comment
о, я не знал о не-медиазапросах. Так, например, если я работаю с мобильным размером до рабочего стола, в моих точках останова я мог бы добавить no-mediaqueries и установить ширину .page для моего большого (настольного) размера? Вот как бы вы это сделали? - person ; 18.10.2012
comment
Просто добавьте запасной вариант no-mediaqueries к любой точке останова, которую вы хотите прочитать в IE8. Если вы используете переменные для своих точек останова (например, $desktop: 70em 12;), вы можете добавить туда резервный класс, и он будет использоваться во всех ваших $desktop точках останова. - person Miriam Suzanne; 18.10.2012