При создании адаптивного веб-сайта, какой CSS мы должны держать вне медиа-запросов?Меньше или больше?

Question

Я делаю сайт, который имеет 3 точки останова 768px, 1024px и 1900 px. Какой размер CSS подходит для хранения вне контейнеров медиа-запросов?

Добавление примера

Все специфические стили внутри медиа-запросов и все обычные стили снаружи

h1 {color:red}

@media only screen and (min-width: 480px) {
h1 {font-size:18px}
}

@media only screen and (min-width: 768px) {
h1 {font-size:22px}

}

@media only screen and (min-width: 1024px) {
h1 {font-size:28px}

}

или

Сначала наиболее часто используемый рабочий стол

@media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}

}

@media only screen and (min-width: 480px) {
h1 {font-size:18px}
}

@media only screen and (min-width: 768px) {
h1 {font-size:22px; }

}

или

Мобильный сначала

@media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}

@media only screen and (min-width: 1024x) {
h1 {font-size:28px; }

}


@media only screen and (min-width: 768px) {
h1 {font-size:22px; }

}

Answer 1

Я полагаю, вы хотите спросить, какой CSS не должен быть внутри блоков медиазапроса, верно?

Если это так, я рекомендую размещать любой CSS, который не изменяется, вне медиазапроса.блоки.Любые цвета, стили шрифта и т. Д. Любой CSS, который меняет расположение элементов, типы отступов, плавающих, встроенных или блочных отображений, любой CSS структурного типа - это то, что я бы поместил в блоки медиазапроса.

Обновление: Чтобы ответить на обновленный вопрос, вы спрашиваете, в каком порядке следует размещать медиаблоки?Если это так, насколько я знаю, на самом деле не имеет значения, в каком порядке они идут. Но чтобы прокомментировать количество возможных медиа-запросов, я бы разделил этот CSS на разные таблицы стилей, чтобы сделать его более удобным для сопровождения.Ваши медиазапросы будут тогда частью ссылок на ваши таблицы стилей в вашем HTML.

Answer 2

Существует множество способов решения этой проблемы, и решение может быть разным в зависимости от обстоятельств. Например, существует ли существующий сайт, который вы реинжинирируете, чтобы реагировать или вы начинаете с нуля?

НАЧИНАЕТСЯ С ЦАПИЛЬКА

Если начинать с нуля, одним из методов является создание всех базовых стилей ВНЕ любого медиазапроса, чтобы эти стили могли просматриваться любым устройством (особенно теми устройствами, которые не поддерживают медиазапросы).

Базовые стили могут включать только цвета, шрифты и т. Д., Или это может быть все, кроме макета.

Затем медиа-запросы используются для добавления различных макетов поверх основных стилей.

МИН или МИН И МАКС

Следующий вопрос: как вы будете обрабатывать различные медиа-запросы ...

Позволите ли вы наносить их друг на друга - в этом случае вы можете начать с малого и наращивать - используя только минимальную ширину.

Например:

@media only screen and (min-width: 600px)

ИЛИ вы можете установить их в серии скобок, чтобы стили одного размера не взаимодействовали с другим размером.

Например:

@media only screen and (min-width: 600px) and (max-width: 800px)

Опять же, нет правильного или неправильного - у обоих есть сильные и слабые стороны. Первый вариант позволяет использовать стили, которые проходят через все ширины. Второй вариант позволяет вам полностью контролировать стили, которые появляются на определенной ширине - без необходимости иметь дело с каскадом.

Работа с IE

Существует множество способов работы со старыми версиями IE, включая.

1. разрешить IE видеть только основные стили
2. размещать медиазапросы в отдельных файлах CSS и ссылаться на эти файлы с помощью медиазапросов ... затем также ссылаться на выбор этих файлов (например, только широкоэкранные файлы CSS) через условные комментарии.
3. Используйте какое-либо решение JS, такое как response.js или другое, чтобы заставить IE понимать медиазапросы.

НТН

Answer 3

В последнее время я прочитал много статей, в которых предлагается сначала начать с наименьшего разрешения, а затем использовать медийные запросы.Для меня это также имеет большой смысл.Единственная проблема - старые браузеры (IE) не понимают медиазапросы.Хотя есть решения этой проблемы (если вы Google).