Bourbon/Neat media query in em

Question

У меня есть некоторые медиа-запросы в аккуратном использовании ems. При использовании пикселей вы можете сделать что-то вроде:

@media (max-width: 640px) { ... } 
@media (min-width: 641px) and (max-width: 768px) { ... } 

При использовании EMS такого рода запросов будет выглядеть следующим образом:

@media (max-width: 40em) { ... } 
@media (min-width: 41em) and (max-width: 48em) { ... } 

Как вы можете видеть в первом запросе эм СМИ есть 40 ет и в второй медиа-запрос - 41 em. Если считать, что 1em - 16px, то существует разрыв 16px. Как я могу справиться с этим?

Я могу изменить 41 em на 40 em, но потом у меня есть два медиа-запроса для 40em. Это особенно раздражает при использовании аккуратного в сочетании с внешним контейнером и омега-микшином в обоих медиа-запросах с различными параметрами для омега-микса, например 2n и 3n.

Проблема заключается в том, что медиа-запрос будет удовлетворять 40m как правилам 2n, так и 3n css, что дает некоторые странные макеты. Теперь я могу использовать омега-сброс mixin. Но я читал, что это не очень хорошая практика.

Я что-то упустил? У кого-то есть хорошие идеи для обработки контрольных точек с использованием ems. Я также мог использовать только min-in в медиа-запросе, но тогда мне все еще нужен микшер омега-сброса.

Answer 1

Я работал бы только с max-widths, так как они более дружелюбны для мобильных пользователей. Таким образом, самые тяжелые переопределения для широких экранов.

EM являются числами и не обязательно должны быть сплошными. Возможно, попробуйте использовать 40em и 40.1em или даже меньше?

Answer 2

В настоящее время я использую только минимальную ширину вместо максимальной ширины с мобильным первым подходом. Спасибо за ввод.

Answer 3

Попробуйте -> эм (640) и эм (641)

http://bourbon.io/docs/#px-to-em