Товаров: 0 (0р.)

Media css под разные разрешения: Под какие основыные размеры настраивать CSS @media screen? — Хабр Q&A

Содержание

как использовать медиа-запросы — учебник CSS

Такое понятие, как медиа-запросы, появилось в CSS3. С их помощью можно определять внешний вид веб-страниц, опираясь на ширину и высоту окна браузера. Благодаря медиа-запросам вы можете параллельно создавать стили для небольших мобильных телефонов, планшетов, лэптопов и мониторов с большой диагональю.

Идея адаптивного дизайна — предоставить посетителям сайт в наиболее читаемой и привлекательной форме. Дизайн создается под как минимум три целевых экрана: настольный ПК, планшет и смартфон. Но учитывая большое количество вариаций этих девайсов, недостаточно остановиться на какой-то одной ширине для каждого типа устройства. Поэтому важно использовать гибкую сетку и проводить тестирование в процессе разработки, отслеживая то, как подстраивается дизайн сайта под разную ширину браузерного окна.

Когда использовать медиа-запросы?

Как правило, для адаптации дизайна веб-страницы необходимо прописать ряд CSS-стилей для определенных элементов.

Ниже мы перечислим наиболее частые сценарии, когда вам понадобится обратиться к медиа-запросам.

  • Определение количества колонок. Трехколоночный макет сайта, который шикарно смотрится на настольных ПК, будет совсем неуместен для мобильных телефонов и планшетов. С помощью медиа-запросов можно переопределить количество колонок в макете с учетом ширины экрана устройства, сгруппировав для смартфонов весь контент в одну колонку.
  • Относительная ширина. Когда вы устанавливаете фиксированную ширину макета, скажем, в 960 пикселей, это подойдет для настольных компьютеров, лэптопов и некоторых особо крупных планшетов. Однако для мобильного телефона такой размер контейнера слишком большой. Используя медиа-запрос, можно специально для смартфонов создать «резиновый» макет, ширина которого будет не фиксированной, а относительной. Таким образом, контейнер шириной 100% будет легко подстраиваться под любой смартфон в любой ориентации.
  • Уменьшение отступов. Большие расстояния между блоками и элементами создают ощущение воздушного, легкого дизайна. Однако отступы, которые хорошо смотрятся на мониторе с диагональю 21-27 дюймов, будут выглядеть абсолютно безобразно на небольшом экране смартфона, к тому же принуждая пользователей больше прокручивать страницу. Медиа-запросы позволяют задать альтернативные размеры отступов для узких дисплеев.
  • Регулировка размера шрифта. Заголовки высотой в 60 пикселей могут красиво смотреться на десктопе, но для мобильных устройств такой размер шрифта редко когда уместен, поэтому для узких экранов будет целесообразным установить меньшее значение font-size.
  • Адаптивная навигация. Нередко бывает так, что навигационное меню, которое было продумано для десктопной версии сайта, совершенно не подходит для мобильных устройств ввиду своей объемности либо манеры расположения пунктов меню. Существует несколько подходов к реализации удобной навигации для мобильной версии сайта, и медиа-запросы непременно принимают в этом участие.
  • Скрытие элементов. Некоторые части веб-страницы могут быть бесполезными либо малозначимыми, если сайт просматривается с мобильного телефона. С помощью свойства display: none и медиа-запросов вы можете скрыть определенные элементы от глаз посетителя, если он зашел на сайт со смартфона. Но имейте в виду, что подобный прием не экономит трафик: скрытые элементы по-прежнему будут загружаться браузером.

Конечно, это далеко не все ситуации, когда применяются медиа-запросы.

Breakpoints (контрольные точки)

При помощи медиа-запросов вы можете создавать так называемые контрольные точки (англ.

breakpoints) и привязывать к ним CSS-стили. К примеру, можно определить для браузера следующие правила: «Если ширина экрана составляет больше чем 767 пикселей, к веб-странице применяются эти стили, а если ширина экрана составляет больше чем 991 пиксель, применяются другие стили». Вот эти числа, обозначающие ширину экрана, и называются контрольными точками.

Какую ширину необходимо указывать в контрольных точках? Наиболее простой ответ: ту, на которой верстка веб-страницы начинает ломаться. Представим, что у вас есть сайт с контейнером шириной 1180 пикселей. Тогда в окне шириной 1200 пикселей (учитываем полосу прокрутки) или меньше он, скорее всего, будет выглядеть не очень хорошо. Вот и ваша первая контрольная точка: необходимо внести правки в дизайн, если сайт просматривается в окне шириной менее чем 1200 пикселей.

При создании гибких сеток часто применяется определенный набор медиа-запросов, предусмотренный для трех различных контрольных точек: смартфон, планшет, монитор ПК. Контрольных точек может быть и больше. Например, в Bootstrap 4 используется четыре контрольных точки в одном направлении и еще четыре — в обратном направлении:


/* ------------------------------------------ */
/* ----- От маленьких экранов к большим ----- */
/* ------------------------------------------ */

/* Стили для очень маленьких экранов (телефоны в книжной ориентации,
дисплей менее 576 пикселей).
Записываются без медиа-запросов, поскольку в Bootstrap это значение по умолчанию */ /* Стили для маленьких экранов (телефоны в альбомной ориентации, дисплей 576 пикселей и более) */ @media (min-width: 576px) { ... } /* Стили для средних экранов (планшеты, дисплей 768 пикселей и более) */ @media (min-width: 768px) { ... } /* Стили для больших экранов (ПК, дисплей 992 пикселей и более) */ @media (min-width: 992px) { ... } /* Стили для очень больших экранов (ПК с большим монитором, дисплей 1200 пикселей и более) */ @media (min-width: 1200px) { ... } /* ------------------------------------------ */ /*------ От больших экранов к маленьким ------*/ /* ------------------------------------------ */ /* Стили для очень больших экранов (дисплей 1200 пикселей и более). Записываются без медиа-запросов, так как контрольная точка для очень больших экранов не имеет верхней границы по ширине */ /* Стили для больших экранов (дисплей максимум 1199 пикселей) */ @media (max-width: 1199px) { .
.. } /* Стили для средних экранов (дисплей максимум 991 пикселей) */ @media (max-width: 991px) { ... } /* Стили для маленьких экранов (дисплей максимум 767 пикселей) */ @media (max-width: 767px) { ... } /* Стили для очень маленьких экранов (дисплей максимум 575 пикселей) */ @media (max-width: 575px) { ... }

 

Кроме этого, в Bootstrap задействуются еще несколько вариаций контрольных точек для записи стилей под конкретный диапазон ширины экранов. При этом используются сразу оба условия — для минимума и для максимума:


/* Стили для очень маленьких экранов (дисплей максимум 575 пикселей) */
@media (max-width: 575px) { ... }

/* Стили для маленьких экранов (дисплей шириной от 576 пикселей до 767 пикселей) */
@media (min-width: 576px) and (max-width: 767px) { ... }


/* Стили для средних экранов (дисплей шириной от 768 пикселей до 991 пикселей) */
@media (min-width: 768px) and (max-width: 991px) { .
.. } /* Стили для больших экранов (дисплей шириной от 992 пикселей до 1199 пикселей) */ @media (min-width: 992px) and (max-width: 1199px) { ... } /* Стили для очень больших экранов (дисплей минимум 1200 пикселей) */ @media (min-width: 1200px) { ... }

Mobile First или Desktop First?

Когда вы пишете стили для контрольных точек, вы не создаете весь дизайн с нуля, а лишь корректируете существующую верстку. Возникает вопрос, под что верстать изначально: под настольные компьютеры с последующей корректировкой под мобильные устройства или же наоборот — сначала создать версию для небольших экранов, а затем расширить ее? Рассмотрим оба подхода.

  • Desktop First. При этом подходе вы сначала полностью верстаете дизайн для больших экранов, без использования медиа-запросов. После этого, используя контрольные точки в медиа-запросах, корректируете дизайн под средние и маленькие экраны (уменьшаете шрифт, перестраиваете макет, скрываете второстепенные элементы и т.
     п.). Преимущество такой верстки заключается в том, что старые браузеры (к примеру, Internet Explorer 8), которые не знают, что такое медиа-запросы, смогут отобразить ваш сайт, поскольку это исходный дизайн, который вы писали без использования директивы @media.
  • Mobile First. Если вы выбираете данный подход, то сначала верстаете дизайн для самых маленьких экранов, не используя медиа-запросы. После этого, создавая контрольные точки, вы корректируете верстку под все более и более широкие экраны.

Оба подхода подразумевают сначала создание определенного базового набора стилей, актуальных для любой версии сайта (например, цвет ссылок, размер основного шрифта и др.), а затем написание тех стилей, которые будут отличаться для различных экранов.

Синтаксис медиа-запросов

Чтобы добавить медиа-запрос в таблицу стилей, запишите следующее:


@media (min-width: 576px) {
	/* здесь будут CSS-стили */
}

Внутрь скобок медиа-запроса поместите стили CSS, как вы делаете это обычно:


@media (min-width: 576px) {
	. column {
		width: 100%;
	}
	h2 {
		font-size: 24px;
	}
	/* и так далее... */
}

Желательно размещать все медиа-запросы под обычными стилями, а не над ними. Если вы используете контрольные точки, отталкиваясь от минимальной ширины экрана (min-width), размещайте их в порядке возрастания ширины экрана. Если вы применяете max-width, тогда расположите медиа-запросы в порядке уменьшения ширины. В противном случае одни медиа-запросы будут перезатирать предыдущие.


Далее в учебнике: принцип создания гибкой сетки в CSS.

CSS: медиа-запросы и адаптивный дизайн

CSS: медиа-запросы и адаптивный дизайн

HTML-страница может отображаться на устройствах с очень разными экранами. Поэтому нужно управлять видом страницы в зависимости от параметров экрана, точнее – свойств окна браузера как программного объекта.

Определение

Adaptive Web Design – дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах и динамически подстраивающийся под заданные размеры окна браузера.

Главное: не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Одна страница может одинаково хорошо смотреться на смартфоне, планшете, ноутбуке, телевизоре, кофеварке, при печати.

Свойства объекта window

Окно браузера, в котором отображается страница, имеет размеры, измеряемые в пикселях. Размеры могут изменяться во время просмотра страницы: пользователь может уменьшить окно, перевернуть устройство в портретную/альбомную ориентацию, изменить масштаб.

Параметры экрана сейчас:

Свойства в коде JavaScript:

  • window.devicePixelRatio: отношение разрешения дисплея текущего устройства в физических пикселях к разрешению в логических (CSS) пикселях. Также это значение можно интерпретировать как отношение размера одного физического пикселя к размеру одного логического (CSS) пикселя. Свойство связано с тем, что различные экраны имеют различные размеры пикселей и плотность пикселей
  • window. innerWidth: ширина области содержимого окна браузера, включая, если есть, вертикальный скроллбар
  • window.innerHeight: высота области содержимого окна браузера, включая, если есть, горизонтальный скроллбар
  • window.screen.width: ширина
  • window.screen.height: высота
  • window.screen.availWidth: доступная ширина
  • window.screen.availHeight: доступная высота

Использование медиа-запросов

Медиазапросы используются в тех случаях, когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиазапросы являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах.

В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width. Медиа-запрос является логическим выражением, которое возвращает истину или ложь.

Ширина экрана

Наиболее частое использование медиа-запросов – установить стили в зависимости от ширины экрана. В коде CSS написать:

@media (max-width: 600px) {
  /* CSS-стили */;
}

Стили этого запроса будут применяться при ширине области просмотра не более 600 пикселей.

@media (min-width: 600px) and (max-width: 800px) {
  div.right {
    width: 100%;
  }
}

Стиль этого запроса (ширина элемента div с классом right равна 100% от родительского элемента) будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.

Ссылки

точки останова, типы устройств, стандартные разрешения и многое другое

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

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

Медиа-запрос — это функция CSS3, которая используется для адаптации макета веб-страницы к различным размерам экрана и типам устройств.

Синтаксис

@media media type and (condition: breakpoint) {
  // Правила CSS
}

Мы можем ориентироваться на различные типы устройств в зависимости от условий. Правила внутри медиа-запроса применяются только при совпадении условий and/or в типах устройств.

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

Правило @Media

Начнем определение медиа-запросов с правила @media, а затем включим правила CSS в круглые скобки. Оно используется для указания типов целевых устройств:

@media () {
  // Правила CSS
}

Скобка

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

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Обычно размер текста составляет 14 пикселей. Однако, поскольку мы применили медиа-запрос, он изменится до 16 пикселей при максимальной ширине устройства 480 пикселей и меньше.

Важно: медиа-запросы всегда должны находиться в конце CSS-файла.

Типы устройств

Типы устройств размещаются сразу после правила @media. Если тип не указан, правило @media выбирает все типы по умолчанию. Существует множество видов устройств, однако их можно разделить на 4 категории:

  • all — для всех типов устройств;
  • print — для принтеров;
  • screen — для экранов компьютеров, планшетов и смартфонов;
  • speech — для скринридеров, которые «читают» страницу вслух.

Например, чтобы выбрать только экраны, нужно установить ключевое слово screen сразу после правила @media. Правила также необходимо объединить ключевым словом «and»:

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Точки останова

Точка останова — это ключ, который определяет, когда следует изменить макет и адаптировать новые правила внутри медиа-запросов. Вернемся к нашему примеру:

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Здесь точка останова составляет 480 пикселей. Теперь медиа-запрос знает, когда устанавливать или перезаписывать новый класс. Если ширина устройства меньше 480 пикселей, то будет применен класс text.

Распространенные точки останова: есть ли стандартное разрешение?

Какую точку останова следует использовать? Поскольку на рынке существует множество устройств, то невозможно определить фиксированные значения для каждого из них.

Следовательно мы не можем сказать, что существует стандартное разрешение для устройств, однако в повседневном программировании есть несколько часто используемых вариантов. Если вы используете фреймворки CSS (например, Bootstrap, Bulma и т. д.), вы также можете применять их точки останова.

Рассмотрим некоторые распространенные точки останова:

  • 320px — 480px: мобильные устройства;
  • 481px — 768px: планшеты;
  • 769px — 1024px: маленькие экраны, ноутбуки;
  • 1025px — 1200px: большие экраны;
  • 1201px и больше —  очень большие экраны, телевизоры.

Как уже было сказано выше, точки останова могут различаться и точно определенного стандарта нет, однако приведенные выше примеры используются чаще всего.

Заключение

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

Читайте также:


Перевод статьи Cem Eygi: CSS Media Queries: Breakpoints, Media Types, Standard Resolutions, and More

CSS3 Media Queries — разным устройствам разный стиль!

Всё более серьёзно находят поддержку среди браузеров новые стандарты HTML5 и CSS3, новые технологии и платформы для мобильных устройств. В скором будущем, создавая сайт на ПК, необходимо будет задумываться о его оптимизации для мобильных устройств, иначе Вы рискуете потерять существенную часть посетителей. Рано или поздно, но придётся перейти на CSS3, и что нужно будет знать хорошо, так точно CSS3 Media Queries. Я выбрал CSS3 Media Queries как материал для написания статьи, потому что CSS3 Media Queries представляет удобный набор правил, с помощью которых можно размещать содержимое на сайте подводя его под определённые размеры или разрешение экрана и при этом обходится без javascript.

Сейчас для правильного отображения элементов под разные разрешения или размеры приходится использовать javascript. Со временем надобность в использовании javascript, думаю, отпадёт именно из-за CSS3 Media Queries.

Посмотрите на примеры четырёх изображений, если Вы измените размеры окна браузера, то размеры изображений пропорционально уменьшатся, что достигается благодаря CSS3 Media Queries без javascript, более того изменитя и цвет заголовков — вместо стандартного синего текст станет зелёным.

История новогодних стеклянных игрушек

Вы видите изображения для ПК!

Согласно общепринятым историческим данным, первые ёлочные игрушки (стеклянные шары) появились в Саксонии в XVI веке. Однако в определении первенства изобретения новогодних игрушек нет одинокого понимания, некоторые авторы считают, что первые стеклянные ёлочные шары были сделаны в 1848 году в местечке Лауша в Тюрингии, и связано это было с тем, что в этот год был неурожай яблок — а именно ими в основном украшали праздничное дерево, но стеклодувы пришли на выручку традиции и сделали стеклянные шары вместо яблок. По сложившийся традиции стеклянные шары затем их начали выдувать в Саксонии в середине XIX века. Позже появились сложные фигурки из стекла.

Новогодние игрушки в России

На Руси первые ёлочные игрушки делали из тряпок, соломы, цветных ленточек, а уже позднее из бумаги и фольги. Этим производством занимались специальные картонажные мастерские. Стеклянные украшения появились позднее.

Производство Елочных игрушек в России!

Первое в России стеклянное ёлочное производство открыли на заводе под Клином, в имении Меньшиковых, примерно в начале XIX века. Ныне данное завод переименован в ОАО «Ёлочка».

О ёлке!

В 1916 году, во время Первой мировой войны, ёлка была запрещена Священным синодом как «немецкий обычай» и вновь разрешена специальным указом ВЛКСМ перед новым 1936 годом, но уже как Новогодняя ёлка.

О новом годе!

Начало года с 1 января было установлено римским правителем Юлием Цезарем в 46 году до н. э. В Древнем Риме этот день был посвящён Янусу — богу выбора, дверей и всех начал.

Лучше посмотреть этот пример в новой вкладке браузера окне из-за структуры slyweb.ru — Пример CSS3 Media Queries. Если Вы внимательно присмотритесь, то должны заметить, что изменились не только размеры изображений, но и цвет заголовков.

CSS код

Синтаксис Media Queries прост, разрешение, ширина или высота экрана определяется с помощью правила media:

@media (min-width:950px) { …. css свойства для экрана шириной 950 px или больше, но не меньше…. }

Если нужно определить разрешение экрана в определённом интервале, то синтаксис немного изменится:

@media (min-width:450px) and (max-width:950px) { …. css свойства для экрана шириной 450 px или больше, но не больше 950 px…. }

На сегодняшний день Media Queries поддерживают многие новые браузеры:

  • Google Chrome 15.0.874. 120 +
  • Opera 11.52 +
  • Firefox 5 +
  • Apple Safari 5.1.1 +
  • Internet Explorer 9 +

Мобильные устройства имеют различное разрешение и размеры экрана, поэтому нужно предусмотреть, что статьи на больших устройствах могут некорректно смотреться на маленьких, например возьмём следующий css код:

@media (max-width:450px) { .photo img { margin: 0 auto; width: 50%; max-width: 640px; max-height: 480px; border-radius: 10px; } } @media (min-width:450px) { .photo img { margin: 0 auto; width: 100%; max-width: 640px; max-height: 480px; border-radius: 10px; } }

Результат будет разным, можно пойти дальше и менять не только размеры, но и тип шрифта или размер заголовков.

Media Queries могут применяться не только в тех случаях, когда нужно изменить представление страницы в зависимости от её разрешения или размера, но и поддержки количества цветов, так как есть экраны поддерживающие 16 мл. цветов, есть экраны поддерживающие 256 цветов. В зависимости от глубины цветовых характеристик могут применятся разные css стили:

/*css стиль для всех устройств независимо от глубины цветопередачи*/ @media all and (color-index) { … } @media all and (min-color-index: 1) { … } /*css стиль для всех устройств, количество цветов у которых 256*/ @media all and (min-color-index: 256) { … }

Но и это ещё не все, что появляется и будет развиваться в недалеком будущем интернета! Если Вы читаете на английском, то можно заглянуть в раздел официальной документации по Media Queries находится он по адресу http://www.w3.org/TR/css3-mediaqueries/.

А вдруг не работает?

Стандарт CSS 3 поддерживаться многими браузерами стал совсем недавно, поэтому есть смысл знать про возможности определения через javascript поддержки Media Queries со стороны браузера. Прежде всего для этого предназначен метод «window.matchMedia» для IE это «window.msmatchMedia»:

if (!window. matchMedia) { // Media Queries не поддерживаются } else { // Media Queries поддерживаются }

Много нового пояилось в CSS3 и в HTML 5, про всё сразу не расскажу, но в следующей статье я постараюсь объяснить про работу с видео и аудио используя CSS3 и jQuery.

Пример оптимизации сайта под разные экраны css мета теги

Пример оптимизации сайта под разные экраны css мета теги Сейчас в нашу жизнь вошло столько устройств, которые позволяют свободно бороздить интернет, что уже не отвечают веениям времени еще недавно преобладающие методы верстки сайтов. Так-как сейчас все больше как маленьких экранов мобильных смартфонов, так и больших экранов десктопов. Я как-то об этом не задумывался и как обычно делал свои сайты под экраны 1024px. Но посмотрев разрешение экранов посещающих мои сайты в яндекс метрике, был удевлен что 1024px уже не актуален и разнообразие разрешений просто огромное. А трафик с маленьких экранов мобильных устройств состовляет почти 20%. Вот скриншот из яндекс метрики одного из моих сайтов, о котором пойдет речь далее.

Разрешения экранов

Основные разрешения экранов, посещающие сайт, статистика за месяц Получается что на каких-то устройствах сайт отображается очень мелко, на каких-то с горизонтальной прокруткой, а на больших экранах с пустыми полями по бокам и сайт выглядит очень маленьким. Так-же и гугл оповестил что «ваш сайт не оптимизирован для мобильных устройств». Ниже пример как сайт выглядил до оптимизации на разных разрешениях от мобильников 240*320px, до 1920*1200px.

Скриншот сайта на разных экранах

Скрин сайта на разрешении дисплеев 320px 800px 1280px 1920px Приступив к оптимизации я первым делом добавил мета тег в body сайта. Сервис гугл для проверки оптимизации сказал что «сайт оптимизирован». Но на самом деле это не так. Данный тег заставляет сайт отображаться пиксель в пиксель, то-есть в зависимости от фактического разрешения экрана, определяет область просмотра. Так например на 320*480px будет отображаться только кусочек сайта, а на больших экранах пустые области.

Для отображения сайта пиксель в пиксель

Ниже код, который заставляет отображать сайт пиксель в пиксель на всех устройствах. И если у маленького экрана разрешение к примеру 6дюймов и 1280*800, то сайт будет малюсенький. А если экран 320*480px, то на экране отобразится кусочек сайта этих размеров. В данном примере значение 1:1, то-есть рано 1.0. Можно ставить свои значения и увеличивать или уменьшать сайт. К примеру на андроид и apple область просмотра сайтов 960-1024px, это значит что сайты с такой шириной будут отображаться на весь экран и без прокрутки, и это не зависит от фактического разрешения экрана, сайт просто масштабируется под размер экрана, Но если добавить этот тег То сайт начнет отображаться в соответствии с аппаратными пикселями, и если разрешение маленькое, то сайт будет слишком крупным и появится прокрутка, а если разрешение большое, то сайт будет маленьким. По-этому один этот viewport ничего не решает, он просто отображает сайт в соответствии с аппаратными пикселями, и отменяет настройки браузеров, что не правильно так-как у браузеров могут буть свои настройки.

Верстка сайта под разные экраны

Чтобы адаптировать сайт я добавил в boby сайта вот этот список мета тегов. viewport — заставляет сайт отображаться в соответствии с пикселями устройства. screen and — позволяет назначать CSS стили в зависимости от разрешения экрана. Так например запись Указывает что для экранов с разрешением меньше 640px нужно применить стиль из файла style.css Так-же можно указывать стили в одном файле или распределить по разным css файлам. В css файле стиль для экранов как в данном примере max-width:640px делается так /*для мобильных устройств*/ @media screen and (max-width: 640px) { aside {width:98%;} article {width:98%;} #container {font-size:120%;} #razdeli_opisanie {width:95%;} } @media screen and (max-width: 1024px) { body {font-size:85%;} } @media screen and (min-width: 1280px) { body {font-size: 100%;} . Стили css назначаются с помощью @media screen and (min-width: ХХХpx) @media screen and (max-width: 640px) { ваши стили } Так-же можно указать стили для конкретных экранов, например (width: 480px), но сейчас там много разрешений что смысла нет писать большой css фаил чтобы для каждого конкретного экрана написать свои правила отображения. Я просто сделал резиновую верстку сайта в основных стилях. И если например разрешение экрана меньше (max-width: 640px), то все блоки у меня растягиваются по ширине экрана. А если экран от 640-1024px (max-width: 1024px), то я меняю только шрифт body {font-size: 85%;}, так-как по умолчанию он в браузерах 16px, а я его делаю 14px. Если разрешение (min-width: 1280px), то-есть 1280px и более, то я просто увеличил шрифт до 100%, а сайт в основной верстке расстягивается по ширине экрана.

То-есть я сделал резиновую верстку сайту, и подкорректировал указав некоторые css правила для отдельных разрешений экрана. В итоге сайт стал выглядеть вот так.

Скриншоты сайта е ветерок ру

Скриншоты в размерах 320px 640px 800px 1024px 1280px 1920px Надеюсь что вам стало понятно как сделать. Думаю как сделать основную резиновую верстку вы и так знаете. Я к примеру все размеры указал в процентах (%) вместо пикселей (px). И указал дополнительно стили под различные разрешения экранов. Но этот сайт я пока не адаптировал под разные экраны, на момент написания этой статьи размеры сайта указаны 995px и все размеры в px.

Адаптивный дизайн на основе медиа-запросов

Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.

Мы стремимся повысить доступность наших продуктов, то есть предоставить всем пользователям оптимальные возможности для работы с ними. Перед нами стояла дилемма: создать специальные мобильные версии сайтов или адаптировать существующие сайты и новые проекты для просмотра как на настольных компьютерах, так и на мобильных устройствах. Создание двух версий сайта позволило бы нам оптимизировать каждую из них для конкретного оборудования, но использование одного общего сайта дает возможность сохранить канонический URL. При этом исключаются сложные переадресации и упрощается совместное использование веб-адресов. Удобство обслуживания является важным фактором, поэтому мы решили не создавать разные версии страниц, а начали обдумывать, как обеспечить выполнение следующих условий:

  1. четкое отображение страниц на экране с любым разрешением;
  2. возможность просмотра группы контента на любом устройстве;
  3. отсутствие горизонтальной полосы прокрутки независимо от размера окна.



Изменяется расположение контента, навигация и масштаб изображений – Хромбуки

Реализация

Начнем с того, что семантическая разметка содержания упрощает перекомпоновку страниц в случае необходимости. С помощью таблицы стилей мы создали резиновый макет. Это первый шаг на пути к достижению нашей цели. Вместо атрибутаwidth для контейнеров мы стали указывать max-width. Атрибут height был заменен атрибутом min-height, чтобы крупный шрифт или многострочный текст не нарушал границы контейнера. Чтобы картинки с фиксированной шириной не ломали резиновые столбцы, применяется следующее правило CSS:

img {
   max-width: 100%;
}

Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью,медиа-запросы теперь поддерживаются всеми современными браузерами, в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.

Области просмотра

Когда пиксель не является пикселем? В том случае, если речь идет о смартфоне. Обычно браузеры смартфонов имитируют браузеры настольных компьютеров с высоким разрешением, поэтому страницы отображаются в них, как на экране монитора. Вот почему появился «режим обзора» с мелким текстом, который невозможно прочитать без увеличения. Ширина области просмотра по умолчанию в стандартных браузерах Android составляет 800 пикселей, а в браузерах iOS – 980 пикселей, независимо от фактического количества физических пикселей на экране.

Чтобы переключить браузер в более удобный для чтения режим, необходимо использовать метаэлемент viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение device-width, сообщаемое браузерами, обычно составляет около 320 пикселей. Если ширина экрана вашего мобильного устройства равна 640 физическим пикселям, изображение шириной 320 пикселей будет масштабировано на всю ширину экрана, и в обработке будет использоваться в два раза больше пикселей. Таким образом, вдвое большая плотность пикселей обеспечивает более четкое отображение на небольшом экране по сравнению с экраном настольного компьютера.

Важно, что если в качестве значения элемента width в метатеге viewport указывается device-width, это значение обновляется, если пользователь меняет ориентацию экрана смартфона или планшета. В сочетании с медиа-запросами эта функция позволяет изменять макет страницы при повороте устройства:

@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops

  */
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}

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

@media all and (orientation: landscape) {
  /* Target device in landscape mode */
}

@media all and (orientation: portrait) {
  /* Target device in portrait mode */
}

Изменяется расположение контента и масштаб изображений – Институт культуры

Пример использования медиа-запросов

Недавно мы запустили новую версию страницы О Google. Чтобы пользователям устройств с небольшими экранами, такими как планшеты и смартфоны, было удобнее работать с этой страницей, кроме резинового макета мы добавили в ее код несколько медиа-запросов.

Вместо того чтобы нацеливаться на конкретные разрешения экранов, мы задали относительно широкий набор контрольных точек. Если разрешение экрана составляет более 1024 пикселей, страница отображается в своем первоначальном виде на сетке из 12 столбцов. Если оно составляет от 801 до 1024 пикселей, благодаря резиновому макету отображается слегка сжатая версия страницы.

Только при разрешении экрана менее 800 пикселей неосновной контент будет отображаться в нижней части страницы:

@media screen and (max-width: 800px) {
  /* specific CSS */
}

Последний медиа-запрос предназначен для смартфонов:

@media screen and (max-width: 479px) {
  /* specific CSS */
}

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

Эти простые приемы позволили оптимизировать сайт для просмотра на самых разных типах устройств.

Изменяется расположение контента, удалено большое изображение – О Google

Заключение

Важно понимать, что не существует простого решения, которое бы позволило сделать сайты удобными для просмотра на мобильных устройствах и устройствах с узкими экранами. Резиновые макеты хороши в качестве отправной точки, но их использование накладывает некоторые ограничения. Медиа-запросы также помогают оптимизировать сайты, но не следует забывать, что в 25% случаев при посещении сайтов используются компьютерные браузеры, которые еще не поддерживают данную технологию. Наличие таких запросов влияет на эффективность их работы. А если на сайте есть виджет, с которым удобно работать с помощью мыши, вовсе не факт, что он будет столь же удобен на сенсорном экране, где сложнее выполнять точные действия.

Крайне важно начинать тестирование на ранних этапах разработки и не прекращать его в дальнейшем. Просматривая свои сайты на смартфоне или планшете, вы не тратите время впустую. Если у вас нет возможности протестировать сайт на реальных устройствах, используйте Android SDK или iOS Simulator. Попросите знакомых и коллег зайти на сайт со своих устройств и понаблюдайте за его работой.

Оптимизация сайта для мобильных устройств позволит привлечь на него еще больше посетителей. Кроме того, изучение и разработка наилучших методов такой оптимизации открывает новые возможности для профессионального развития.

Другие примеры адаптивного веб-дизайна в Google:

Авторы публикации: Руперт Брейени, Эдвард Юнг, Мэтт Зюррер, команда веб-мастеров Google.

Подмена файла стилей style.css в зависимости от разрешения экрана монитора

Разрешение экрана монитора

Стандартным разрешением экрана, до недавнего времени, считались размеры: 1024 px – ширина и 768 px – высота. Именно на такой монитор старались ориентироваться web мастера при верстке очередного web ресурса. Но прогресс не стоит на месте и сегодня при создании сайта необходимо учитывать все разнообразие мониторов для того, чтобы дизайн Вашего сайта отображался одинаково при любом разрешении экрана у пользователя.
Вот об этом я и хочу рассказать в этой статье.
Для начала выясним, какие свойства и каких элементов дизайна придется изменять, чтобы сохранить внешний вид веб страницы. Во-первых, это фоновый рисунок – т. е. свойство background-image для body. Далее идут: размер шрифта – font-size и размеры картинок width и height для элементов img. Как Вы уже догадались, все эти свойства находятся в одном файле стилей – style.css. Поэтому, на мой взгляд, проще всего при загрузке страницы узнать разрешение экрана монитора у пользователя, а затем в зависимости от размеров ширины (width) и высоты (height) заменить файл style.css на соответствующий данным параметрам.
Всё вышесказанное будем реализовывать при помощи javascript.

Определяем разрешение экрана пользователя
        var w = screen.width;  //- ширина экрана  монитора
        var h = screen.height; //- высота экрана монитора
      
Задаём условие

        // для разрешений меньше или равных 1024х768
        if (w <= '1024' && h <= '768')
       // или
        if (w == '1280' && h == '1024') – //для разрешения 1280х1024/
        //если хотим задать диапазон разрешений, то можно указать ширину без высоты/
        if (w >= '1024' && w<= '1280')
       

это будет зависеть от фоновой картинки и других элементов дизайна страницы сайта.

Подменяем файл стилей style.css.

          {document.getElementById("stylesheet").href="css/style_1024х768.css";}
          

Предварительно не забудьте прописать  в подключении файла стилей:

          <link rel="stylesheet" href="css/style.css"  type="text/css" media="screen"  />
          

Функция для замены CSS в соответствии с разрешением экрана.

  function  changeCss() {
              var w =  screen.width;
              var h =  screen.height;
              if (w <=  '1024' && h <= '768')
                  {
                           document.getElementById("stylesheet").href="css/style_1024х768.css";
                  }
              else
                    {
                           if (w == '1152' && h ==  '864')
                                  {
                                           document. getElementById("stylesheet").href="css/style_1152х864.css";
                                  }
                              else
                                    {
                                             if (w == '1280'  && h == '800')
                                                   {
                                                           document.getElementById("stylesheet").href="css/style_1280х800.css";
                                                   }
                                             else
                                                    {
                                                           if (w >= '1280' && h >=  '1024')
                                                                {
                                                                      document.getElementById("stylesheet").href="css/style_1024х1024.css";
                                                               }
                                                   };
                                   };
                  };
             }; 
                  

Теперь остаётся сохранить данную функцию в файле javascript. js и перед закрывающемся тегом </head> сделать подключение и запуск.

          <script  type="text/javascript"  src="javascript.js"></script>
          <script  type="text/javascript">
          window.onload  = changeCss;
          </script>
          </head>
          

Вот и всё.

Вопросы, замечания и предложения оставляйте в комментариях.

 

Программное тестирование медиа-запросов — CSS: каскадные таблицы стилей

Модель DOM предоставляет функции, позволяющие тестировать результаты медиа-запроса программно, через интерфейс MediaQueryList , его методы и свойства. Создав объект MediaQueryList , вы можете проверить результат запроса или получать уведомления об изменении результата.

Прежде чем вы сможете оценить результаты мультимедийного запроса, вам необходимо создать объект MediaQueryList , представляющий запрос. Для этого используйте метод window.matchMedia .

Например, чтобы настроить список запросов, который определяет, находится ли устройство в альбомной или портретной ориентации:

  const mediaQueryList = window.matchMedia("(ориентация: книжная)");
  

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

  если (mediaQueryList.matches) {
  
} еще {
  
}
  

Если вам нужно постоянно быть в курсе изменений оцениваемого результата запроса, эффективнее зарегистрировать прослушиватель, чем опрашивать результат запроса.Для этого вызовите метод addEventListener() для объекта MediaQueryList с функцией обратного вызова, которая будет вызываться при изменении статуса медиа-запроса (например, тест медиа-запроса переходит с true на false ):

 
const mediaQueryList = window. matchMedia("(ориентация: книжная)");


функция handleOrientationChange(mql) {
  
}


обработатьOrientationChange(mediaQueryList);


mediaQueryList.addEventListener («изменение», handleOrientationChange);
  

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

Функция handleOrientationChange() просматривает результат запроса и обрабатывает все, что нам нужно сделать при изменении ориентации:

  функция handleOrientationChange(evt) {
  если (доп.Спички) {
    
  } еще {
    
  }
}
  

Выше мы определяем параметр как evt — объект события. Это имеет смысл, поскольку более новые реализации MediaQueryList обрабатывают прослушиватели событий стандартным способом. Они больше не используют необычный механизм MediaQueryListListener , а стандартную настройку прослушивателя событий, передавая объект события типа MediaQueryListEvent в качестве аргумента функции обратного вызова.

Этот объект события также включает в себя свойства media и соответствует свойствам , поэтому вы можете запросить эти функции MediaQueryList путем прямого доступа к нему или доступа к объекту события.

Чтобы прекратить получать уведомления об изменениях значения вашего медиа-запроса, вызовите removeEventListener() в MediaQueryList , передав ему имя ранее определенной функции обратного вызова:

  mediaQueryList.removeEventListener(handleOrientationChange);
  

Интерфейс MediaQueryList

Таблицы BCD загружаются только в браузере

Адаптивность CSS — бесплатное руководство для изучения HTML и CSS

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

Какие варианты доступны для работы с мобильными устройствами?

  1. Ничего не делать и позволить мобильным пользователям увеличивать масштаб, чтобы читать ваш сайт
  2. Создайте второй веб-сайт , например m.facebook.com и перенаправить мобильные устройства на этот веб-сайт
  3. .
  4. Использовать адаптивный веб-дизайн

Устройство, браузер, окно просмотра

Прежде чем идти дальше, нам нужно определить некоторые термины:

устройство
используемое оборудование: смартфон, планшет, ПК или ноутбук
браузер
запущенное программное обеспечение: Firefox, Google Chrome, Safari, Internet Explorer
окно просмотра
область в браузере, которая фактически отображает веб-страницу

Адаптивный веб-дизайн

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

Отзывчивость зависит от свойств устройства или области просмотра . Например:

  • как ширина область просмотра?
  • как высокая область просмотра?
  • как ориентировано окно просмотра ?
  • какое у устройства разрешение ?

В зависимости от ответа на эти вопросы адаптивный CSS будет применять другие или дополнительные правила CSS.

До сих пор каждая часть нашего CSS использовалась каждым устройством, которое обращалось к нашей веб-странице. Адаптивный веб-дизайн позволяет нам применять 90 137 определённых 90 138 стилей в 90 137 определённых 90 138 случаях.

медиа-запросов

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

Синтаксис медиа-запроса напоминает синтаксис ключевых кадров анимации, так как он определяет блок в CSS , в котором вы пишете дополнительные правила CSS , которые применяются только в определенных случаях .

  /* Эта часть читается каждым устройством/вьюпортом */
тело {размер шрифта: 14px;}

@media (минимальная ширина: 1200 пикселей) {
  /* Эта часть читается только окнами просмотра шире 1200 пикселей */
  тело {размер шрифта: 16px;}
}  

Здесь размер текста по умолчанию 14px . Но чтобы приспособиться к большим окнам просмотра, размер текста устанавливается равным 16px , если окно просмотра шире , чем 1200 пикселей .

Имейте в виду, что мы говорим о области просмотра , а не об устройстве.

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

Несколько параметров

Вы можете потребовать 2 условий для активации медиа-запроса.

  body{размер шрифта: 18px;}

@media (минимальная ширина: 1000 пикселей) и (ориентация: альбомная) {
  тело {размер шрифта: 20px;}
}  

Размер шрифта будет установлен на 20px только в том случае, если область просмотра имеет ширину не менее 1000px и в ландшафтном режиме (в отличие от портретного режима).

Вы также можете использовать вместо и только . Они называются логическими операторами.

Несколько правил CSS

Вы можете включить столько правил CSS , сколько хотите в медиа-запрос.

  тело {размер шрифта: 14px;}
.button{ дисплей: блок;}
. title{выравнивание текста: по центру;}

@media (минимальная ширина: 1200 пикселей) {
  тело {размер шрифта: 16px;}
  .container{маржа: 0 авто; ширина: 960 пикселей;}
  .button{дисплей: встроенный блок;}
  .title{выравнивание текста: по левому краю;}
}  

Параметры

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

Написав @media (min-width: 1200px) , мы указываем браузеру читать этот блок , только если область просмотра шире 1200px.

ширина

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

Поскольку мы (обычно) не прокручиваем по горизонтали, нам нужно уместить наш дизайн в пределах доступной ширины области просмотра . Медиа-запросы позволяют выполнять проверок по этой ширине и применять определенные стили, если область просмотра шире ( min-width ) или уже ( max-width ) на определенное количество пикселей.

Вы можете использовать:

  • min-width(960px) : стили будут применяться, только если область просмотра шире , чем 960px
  • max-width(768px) : стили будут применяться, только если область просмотра уже , чем 768px

Эти параметры принимают пикселей , ems и rems .

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

высота

Параметр height работает так же, как и параметр width, за исключением того, что он выполняет проверку высоты области просмотра.

Вы можете использовать min-height и max-height .

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

ориентация

Параметр ориентации может определить, находится ли окно просмотра в одном из следующих режимов:

  • пейзаж : окно просмотра на шире чем в высоту
  • портрет : окно просмотра на выше чем в ширину
  @media (ориентация: книжная) {
  /* Для вертикальных окон просмотра */
}

@media (ориентация: альбомная) {
  /* Для горизонтальных окон просмотра */
}  

Хотя он в основном используется для планшетов и смартфонов, имейте в виду, что даже на широкоэкранном мониторе окно просмотра может быть в книжной ориентации, если его ширина меньше высоты.

На мобильных устройствах, даже если вы держите устройство в портретном режиме, если отображается клавиатура, область просмотра можно рассматривать как альбомную, учитывая, что ее высота становится меньше ширины.

разрешение

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

Зависит от:

  • какое у вас разрешение (например, 1440×900, 1280×800, 1024×768 и т. д.)
  • диагональ вашего экрана (например, 11,6’’, 14’’, 21’’ и т. д.)

Плотность пикселей в основном говорит о том, насколько четкий ваш дисплей (чем выше dpi, тем четче дисплей).

  @media (минимальное разрешение: 300 точек на дюйм) {
  /* */
}  

Настольные экраны обычно имеют плотность пикселей около 100 точек на дюйм. С другой стороны, смартфоны имеют невероятный диапазон dpi. Например:

  • Nokia Lumia 640 : 332dpi
  • Apple iPhone 6+ : 401 dpi
  • Google Nexus 5 : 445 точек на дюйм
  • HTC One : 469 точек на дюйм
  • Samsung Galaxy S6 : 577 точек на дюйм

Какую роль здесь играет CSS? Что ж, на экранах с большим разрешением текст будет отображаться очень четко: отдельные пиксели становятся едва заметными, а буквы выглядят абсолютно гладкими.

Проблема с изображениями например на дисплеях Retina. Это длинная тема, поэтому прочитайте статью «Техники CSS для дисплеев Retina» на сайте sitepoint.

Источник: sitepoint.com

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

  /* логотип 40x40 */
.logo{фоновое изображение: URL(marksheet-logo.png); размер фона: 40px 40px;}

@media (минимальное разрешение: 300 точек на дюйм) {
  /* Логотип размером 80x80 изменен на 40x40 */
  .логотип {фоновое изображение: URL([электронная почта защищена]);}
}  

Имейте в виду, что размер фона должен быть равен . В противном случае изображение @2x Retina заняло бы вдвое больше места.

Суффикс @2x — это просто обозначение Apple для изображений Retina, и оно было принято в качестве обозначения де-факто по умолчанию в CSS.

Сначала мобильные или настольные компьютеры

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

Но сначала разработать мобильную версию на самом деле проще , учитывая «HTML почти на 100% отзывчив из коробки» . Большинство веб-дизайнов для мобильных устройств сосредоточены только на вертикальных макетах, без столбцов или с очень небольшим количеством столбцов, потому что прокрутка на мобильных устройствах естественна .

С помощью Flow легко создать мобильный сайт: просто упорядочите элементы HTML так, как вы хотите, чтобы они отображались. Просто написав HTML-код, вы уже разрабатываете свой веб-сайт для мобильных устройств .Сначала заголовок, затем меню, затем содержимое и в конце нижний колонтитул. Вуаля !

CSS для мобильных устройств будет использовать медиа-запросов с минимальной шириной , чтобы применить определенные правила для больших областей просмотра:

  /* Общие правила CSS для всех областей просмотра, включая смартфоны */
тело{ }
.заглавие{ }
.кнопка{ }

@media (минимальная ширина: 768 пикселей) {
  /* Правила для планшетов и больших окон просмотра */
}

@media (минимальная ширина: 992 пикселя) {
  /* Правила для ноутбуков, маленьких экранов настольных компьютеров и больших окон просмотра */
}

@media (минимальная ширина: 1200 пикселей) {
  /* Правила только для больших экранов рабочего стола */
}  

Подход, ориентированный на рабочий стол, начинается со стилей для больших экранов и max-width медиа-запросов, чтобы применить определенные правила для небольших окон просмотра:

  /* Общие правила CSS для каждого окна просмотра, включая большие экраны рабочего стола */
тело{ }
. заглавие{ }
.кнопка{ }

@media (максимальная ширина: 1199 пикселей) {
  /* Правила для ноутбуков, небольших экранов настольных компьютеров и меньших окон просмотра */
}

@media (максимальная ширина: 991px) {
  /* Правила для планшетов и меньших окон просмотра */
}

@media (максимальная ширина: 767 пикселей) {
  /* Правила только для смартфонов */
}  

Обратите внимание, что значения max-width для настольных компьютеров на 1 меньше, чем для мобильных устройств min-width . Например:

  • @media (минимальная ширина: 768 пикселей) предназначен для планшетов
  • @media (макс. ширина: 767 пикселей) не предназначен для планшетов

Адаптивный веб-дизайн — разрешение устройства и ширина области просмотра.| by Sakthivel Sekar

Короче говоря, цель этой статьи — объяснить, как ширина области просмотра RWD рассчитывается на основе разрешения экрана устройства.

адаптивный веб-дизайн

Адаптивный веб-дизайн больше не жаргон. Это (согласно Википедии)

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

Существует множество фреймворков CSS с открытым исходным кодом, таких как twitter bootstrap, Foundation, Skeleton., , чтобы упростить внедрение RWD, и все эти платформы имеют общий строительный блок, то есть медиа-запрос .

Bootstrap в основном использует эти диапазоны медиа-запросов для создания разумных точек останова.

 // Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше) 
@media (минимальная ширина: 576 пикселей) { ... }// Средние устройства (планшеты, 768 пикселей и выше)
@media (минимальная ширина: 768 пикселей) { ... }// Крупные устройства (рабочие столы, 992 пикселя и выше)
@media (минимальная ширина: 992 пикселя) { ... }// Очень большие устройства (большие ширина: 1200px) { . .. }

Любое свойство CSS, которое вы пишете в блоке

 @media (min-width: 576px) { 
...
}

, будет применяться только к устройствам, у которых ширина области просмотра составляет минимум 576 пикселей в ширину. и не более 767 пикселей. Та же логика применима для средних, больших и очень больших устройств соответственно.

Заметили? Я упомянул ширину области просмотра, а не ширину устройства или разрешение экрана, и да, ширина области просмотра отличается от (Примечание: в этой статье мы фокусируемся только на ширине, поскольку высота не имеет большого значения из-за вертикальной прокрутки) .

Прежде чем мы углубимся в поиск взаимосвязи между разрешением экрана и областью просмотра, полезно знать технические характеристики экрана устройства, с которым вы работаете. Я использую MacBook Pro , 13,3 дюйма по диагонали широкоформатный 2560×1600 разрешение .

спецификация моего устройства

Итак, что такое окно просмотра?

Область просмотра — это видимая пользователем область веб-страницы, и она зависит от устройства, которое будет меньше на мобильном телефоне, чем на экране компьютера.

Чтобы рассчитать ширину области просмотра вашего устройства, вы можете запустить window.innerWidth в консоли инструмента разработки браузера. Вот вывод моего устройства

Расчет ширины области просмотра

Итак, как мое устройство с диагональю 13,3 дюйма и разрешением устройства 2560×1600 пикселей установило 1440 в качестве ширины области просмотра — это вопрос, на который нужно ответить.

Какое разрешение на самом деле?

Разрешение выражается в пикселях, а пиксели — это наименьший физический элемент цифрового устройства отображения, который может различить глаз.

Разрешение 2560×1600 пикселей означает, что мой экран имеет 2560 физических пикселей в строке и 1600 пикселей в столбце, т. е. 2560 пикселей в ширину и 1600 пикселей в высоту.

Если это так, у меня должна быть ширина области просмотра 2560, а не 1440. Но почему тогда 1440?

Хотя размер физических пикселей моего устройства составляет 2560×1600, если бы браузер пытался использовать каждый пиксель для отображения содержимого на экране, содержимое было бы слишком маленьким, чтобы его можно было увидеть.

Итак, вот понятие логических пикселей (a.k.a CSS-пиксели в веб-разработке). Логические пиксели определяются как количество физических пикселей на экране устройства, деленное на Соотношение пикселей устройства (DPR) .

Проще говоря, это число физических пикселей, содержащихся в одном логическом пикселе. Например, устройство с DPR, равным 2, означает, что один логический пиксель содержит 4 (2 x 2) физических пикселя.

 2560/2 = 1280 
1600/6 = 800

, поэтому мой экран имеет 1280 логических пикселей в ширину и 800 пикселей в высоту, т. е.e, 1280×800 — это мое разрешение экрана ( Примечание: 2560 — это разрешение устройства/исходное разрешение, а 1280 — мое разрешение экрана ).

Для большинства устройств разрешением экрана будет ширина области просмотра по умолчанию. Но модель MacBook Pro 2017 года устанавливает разрешение экрана 1440×900 по умолчанию.

Это называется Масштабированным разрешением, и это масштабированное разрешение позволяет вам увеличить текст и объекты на экране или сделать их меньше на экране.

MacBook Pro 13,3 дюйма поддерживает следующие три масштабированных разрешения, кроме исходного разрешения по умолчанию.

 1680 x 1050 
1440 x 900
1024 x 640

и Mac выбирает 1440×900 в качестве разрешения экрана по умолчанию

Давайте посмотрим, что произойдет с моим окном просмотра, когда я изменю масштабированное разрешение. Когда я выбираю 1024×640, и вот результат

1024×640, разрешение

для 1680×1050, вот результат

1680×1050, разрешение

Итак, ширина области просмотра устанавливается на основе разрешения экрана, и имейте в виду, что разрешение экрана не всегда будет разрешением устройства / DPR. Это также может быть масштабированное разрешение.

Хотите узнать больше о масштабируемых разрешениях? Следуйте этим

запросам мультимедиа CSS: ширина против ширины устройства

ширина по сравнению с шириной устройства

В СМИ CSS разница между шириной и device-width может быть немного запутанным, поэтому давайте немного объясним это. device-width относится к ширине самого устройства, в других словами, разрешение экрана устройства.Допустим, ваш экран разрешение 1440 x 900. Это означает, что экран имеет ширину 1440 пикселей, поэтому имеет ширину устройства 1440 пикселей. Большинство мобильных телефонов имеют ширина устройства 480 пикселей или меньше, включая популярный iPhone 4 (с шириной устройства: 320 пикселей), несмотря на то, что технически он имеет разрешение 640 x 960. Это связано с дисплеем Retina в iPhone 4, который вмещает в себя два пикселя устройства. каждый пиксель CSS на экране. Это верно и для Ipad 3; это сообщил ширина устройства составляет 768 пикселей, как и его предшественники, хотя его фактическая разрешение экрана 1536х2048 пикселей.В общем ширина более универсальна когда дело доходит до создания адаптивных веб-страниц, полезно использовать ширины устройства . когда вы хотите специально настроить таргетинг на мобильные устройства (а не на настольные компьютеры с маленькое окно браузера, например), так как настольные компьютеры редко имеют экран разрешения ниже определенного числа, например 320 x 480 пикселей.

Ниже показано разрешение экрана и размеры мультимедийного устройства CSS для некоторых популярных устройств. там:

Разрешение
Размеры носителя CSS
Устройство (пкс) ширина устройства/высота устройства (пикс.)
Айфон 320 х 480 320 x 480, как в книжной, так и в альбомной ориентации
iPhone 4 640 х 960 320 x 480, как в портретном, так и в ландшафтном режиме. отношение пикселей устройства равно 2
iPhone 5, 5s 640 х 1136 320 x 568, как в портретном, так и в ландшафтном режиме. отношение пикселей устройства равно 2
iPhone 6 750 х 1334 375 x 667, как в портретном, так и в ландшафтном режиме. отношение пикселей устройства равно 2
iPhone 6 плюс 1242 x 2208 414 x 736, как в портретном, так и в ландшафтном режиме. отношение пикселей устройства равно 3
iPad 1 и 2 768 х 1024 768 x 1024, как в портретном, так и в ландшафтном режиме
iPad 3 1536 x 2048 768 x 1024, как в книжной, так и в альбомной ориентации

CSS плотность пикселей 2

Samsung Galaxy S I и II 480 х 800 320 x 533, в портретном режиме

Плотность пикселей CSS 1,5

Samsung Galaxy S III 720 х 1280 360? x 640?, в портретном режиме
HTC Evo 3D 540 х 960 360 x 640, портретный режим

Плотность пикселей CSS равна 1. 5

Amazon Kindle Fire 1024 х 600 1024 x 600, ландшафтный режим

Просто чтобы еще больше усложнить ситуацию, в устройствах iPhone и iPad ширина устройства всегда соответствует ширине устройства в портретном режиме , независимо от того, находится ли устройство в этом режиме или альбомном вместо. С другими устройствами его ширина устройства изменяется в зависимости от его ориентация.

* Для более полный список устройств и разрешений их экранов см. эта страница.

Давайте теперь посмотрим еще несколько медиа-запросов CSS, которые захватывают разные устройства и размеры экрана:

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) и (ориентация: портрет){
  /* здесь немного CSS */
}

/ * #### Мобильные телефоны Пейзаж #### */
@media screen and (max-device-width: 640px) и (ориентация: альбомная){
  /* здесь немного CSS */
}

/* # ### Мобильные телефоны Книжная или альбомная ориентация #### */
@media screen and (max-device-width: 640px){
  /* здесь немного CSS */
}

/* #### iPhone 4+ Книжная или альбомная ориентация #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
  /* здесь немного CSS */
}

/* #### iPhone 5, портретная или альбомная ориентация #### */
@media (высота устройства: 568 пикселей) и (ширина устройства: 320 пикселей) и (-webkit-min-device-pixel-ratio: 2){
  /* здесь немного CSS */
}

/* #### iPhone 6 и 6 плюс книжная или альбомная ориентация #### */
@media (min-device-height: 667px) и (min -device-width: 375px) и (-webkit-min-device-pixel-ratio: 3){
  /* здесь немного CSS */
}

/* #### Планшеты Книжная или Альбомная #### */
@media screen and (min-device-width: 768px) and (max-device -width: 1024px){
  /* здесь немного CSS */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* здесь немного CSS */
}

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

Метатег области просмотра — ключ к подготовка страницы для оптимизации мобильных устройств

разрешений рабочего стола (как сделать) | Медиа-запросы

[?Музыка?] 0:00

[Адаптивный веб-дизайн: Медиа-запросы: Разрешение рабочего стола] 0:02

[Ник Петтит] Мы подготовили наш проект и теперь готовы погрузиться в медиа-запросы.0:06

Однако, прежде чем мы сможем вернуться к кодированию, нам нужно рассмотреть несколько вещей. 0:10

Во-первых, если вы не знакомы с медиа-запросами, я настоятельно рекомендую 0:15

что вы смотрите видео с медиа-запросами в главе CSS3. 0:18

Вы, вероятно, сможете достаточно хорошо следовать этому курсу без особого начального обучения, 0:23

но просмотр этих видео сначала определенно поможет. 0:27

В нашем коде мы будем использовать несколько медиа-запросов, которые строятся друг на друге.0:31

Каждый из этих медиа-запросов будет соответствовать определенному минимальному разрешению. 0:35

Однако имейте в виду, что из-за каскадного характера 0:41

каскадных таблиц стилей каждый из этих медиа-запросов будет применяться 0:45

к следующему набору разрешений. 0:50

Так, например, стили, которые мы включаем в наш первый медиа-запрос 0:52

также будет применяться к каждому последующему медиа-запросу. 0:57

Второй медиа-запрос также будет применяться ко всем разрешениям, которые следуют за ним и так далее.1:00

Это будет иметь больше смысла, когда мы начнем кодировать. 1:07

Наконец, я просто хочу напомнить вам, что мы намеренно устанавливаем размеры шрифтов вручную. 1:10

Хотя, безусловно, можно создавать шрифты, которые ведут себя аналогично нашей плавной сетке, 1:16

Лично я предпочитаю устанавливать шрифты вручную, чтобы вы всегда были уверены, что они читаемы. 1:21

без многих крайних случаев.1:27

Теперь мы готовы приступить к нашим медиа-запросам, 1:31

так что давайте продолжим и переключимся на application.css, 1:34

возьмите один из этих флагов комментариев, перейдите в rwd.css, 1:39

и вставьте его.1:44

Первый будет 1700px. 1:46

Мы продолжим и начнем наш медиа-запрос и скажем @media (max-width: 1700px) {. 1:52

Теперь все, что мы собираемся делать для этих первых нескольких медиа-запросов 2:02

изменяет размер шрифта вручную. 2:06

Как я упоминал ранее, вы можете сделать размер шрифта адаптивным. 2:08

Однако на самом деле я предпочитаю устанавливать их вручную. 2:12

просто чтобы убедиться, что размеры шрифта читабельны и нет странных крайних случаев. 2:16

Итак, сначала мы собираемся выбрать заголовок 2:23

и мы собираемся выбрать текст абзаца внутри этого заголовка 2:26

и мы изменим размер шрифта: 1.1эм;. 2:29

Давайте просто сохраним это и проверим в браузере. 2:34

Один действительно простой способ протестировать медиа-запросы — изменить цвет фона основного текста. 2:38

до действительно яркого цвета, чтобы вы знали, что медиа-запрос действительно работает.2:45

Итак, мы просто продолжим и скажем, что фон: желтый; 2:51

сохраните это, и мы переключимся на Google Chrome и обновим страницу. 2:55

Как видите, этот медиа-запрос действительно выбирает именно это разрешение экрана.3:01

Итак, давайте продолжим и настроим еще несколько размеров шрифта. 3:08

Далее мы настроим кнопку call_to_action, 3:12

поэтому мы скажем #misc #call_to_action 3:16

и, как мы упоминали ранее, этот текст был слишком большим для размера этой кнопки. 3:20

поэтому мы продолжим и уменьшим его до 1.3эм. 3:25

Сохраните это, и когда мы вернемся в браузер и обновим страницу, 3:29

Вы можете видеть, что наша кнопка call_to_action теперь имеет более разумный размер шрифта. 3:35

Итак, давайте вернемся назад, 3:40

а затем мы продолжим и настроим размер наших блочных котировок.3:43

Итак, мы скажем #misc для столбца, 3:47

и мы выберем наши цитаты, 3:50

который на самом деле является селектором элемента 3:53

и мы скажем размер шрифта: 1. 4эм; 3:56

Мы освободим место для работы здесь, 3:59

а затем мы продолжим и стилизуем наши функции 4:01

поэтому мы будем говорить #features .feature .info 4:04

а затем текст абзаца для информации об этой функции 4:10

мы установим размер шрифта: 1em;.4:14

И, наконец, нам нужно установить минимальную высоту 4:18

на каждом функциональном блоке. 4:22

Давайте просто вернемся к браузеру и обновим 4:24

и тогда мы сделаем это. 4:28

Итак, если мы обновим страницу, мы увидим, что наши блочные кавычки теперь имеют более разумный размер. 4:30

и если мы прокрутим вниз до наших функций, текст абзаца там 4:35

выглядит намного лучше, 4:40

и нам нужно установить минимальную высоту над каждой из этих функций.4:43

Теперь я выбрал высоту 150 пикселей, что является заданной высотой. 4:47

но вы можете настроить это по мере необходимости, в зависимости от вашего проекта. 4:53

Причина, по которой мы делаем это, заключается в том, чтобы эти функции не были слишком сжаты. 4:57

друг против друга по мере уменьшения размера браузера.5:02

Итак, давайте вернемся к TextMate, 5:06

и мы скажем #features .feature { 5:09

минимальная высота: 150px;. 5:13

Итак, мы переключимся обратно и обновим 5:17

и мы не должны видеть слишком много изменений прямо сейчас, 5:21

но эта небольшая корректировка очень поможет нам в будущем.5:25

Итак, теперь мы готовы перейти к следующему разрешению экрана около 1400 пикселей. 5:29

потому что когда мы начинаем изменять размер браузера и делаем его немного меньше, 5:34

вы можете видеть, что наш макет начинает довольно быстро ломаться.5:39

Итак, мы продолжим и переключимся обратно. 5:43

Мы скопируем наш флаг комментария, закроем этот медиа-запрос, 5:46

и мы начнем наш следующий медиа-запрос здесь. 5:53

Поменяем 1700 на 1400, 5:58

и мы скажем @media (max-width: 1400px) {.6:04

Сейчас этот скринкаст запускается с разрешением 1280 x 720. 6:11

так что эти 1400 пикселей — и разрешение после этого — 6:16

следует применять немедленно. 6:21

Каждое из этих разрешений накладывается каскадом друг на друга.6:23

Итак, мы уже применили 1700 пикселей, что соответствует большему разрешению экрана. 6:27

но когда мы применим изменения для 1400, вы увидите, что наш текущий макет 6:33

начнет выглядеть еще лучше. 6:39

Итак, здесь мы сделаем очень похожие вещи, изменив размер шрифта. 6:41

Мы скажем #header p { 6:45

имеет размер шрифта: 1em; 6:50

Заголовок второго уровня для #header h3 { 6:55

также будет иметь размер шрифта: 1em;.6:59

#misc #call_to_action { 7:05

также уменьшится размер шрифта: 1.2em;. 7:11

Наша цитата #misc { 7:17

сократится до 1.2эм; 7:21

а затем информация о наших функциях #features. feature.info р { 7:26

также будет уменьшен до размера шрифта: 0,9em;. 7:31

И, наконец, нам нужно отрегулировать минимальную высоту. 7:36

над каждой из наших функций снова, 7:40

поэтому мы скажем #features .особенность { 7:43

и мы установим его на min-height: 130px;. 7:47

Итак, мы хотим убедиться, что этот медиа-запрос применяется. 7:52

Итак, давайте продолжим и установим для нашего тела другой цвет фона. 7:56

и мы скажем фон: зеленый;.8:01

Поэтому, когда мы вернемся в Google Chrome и обновим страницу, 8:06

вы можете видеть, что наш фон теперь зеленый, 8:10

наша кнопка call_to_action выглядит немного лучше; 8:14

мы больше не занимаем две строчки.8:17

Наши блочные котировки также немного меньше. 8:20

Наш текст абзаца в заголовке выглядит лучше. 8:22

Заголовок второго уровня под нашим логотипом имеет более разумный размер. 8:26

и здесь наши функции также выглядят немного лучше.8:31

Следующее разрешение, которое мы собираемся использовать, это 1200, 8:37

и здесь мы начинаем вносить больше, чем просто изменения размера шрифта. 8:40

Итак, давайте вернемся к TextMate. 8:44

Мы скопируем наш флаг комментария, 8:47

выйти за пределы этого медиа-запроса на 1400.8:49

Мы изменим этот флаг комментария на 1200 8:54

и мы пропустим здесь, 8:58

и сначала мы скажем @media (max-width: 1200px) 9:01

и мы откроем этот медиа-запрос. 9:09

И во-первых, мы собираемся перемещать заголовок влево 9:12

потому что то, что мы на самом деле собираемся делать при этом разрешении экрана 9:17

это внести серьезные коррективы в макет страницы. 9:20

Мы собираемся перейти от 3-колоночного макета 9:24

к макету в 2 колонки.9:28

Теперь нам не нужно быть столь же точными с нашими плавающими сетками в этих разных разрешениях. 9:31

потому что мы уже достаточно хорошо настроили их в обычном или высоком разрешении, 9:36

так что мы можем просто посмотреть на это здесь. 9:42

Мы скажем ширина: 50%; 9:45

и мы собираемся дать нашему заголовку немного больше margin-top: 10%;. 9:50

Продолжая переупорядочивать наш макет, мы собираемся переместить столбец разного влево. 9:57

и мы собираемся очистить: left; 10:06

и мы установим ширину: 55%;.10:09

На нашей кнопке #call_to_action, 10:15

и на нашем #лого { 10:17

мы удалим margin-top: 0; потому что помни, 10:20

что вероятно, поскольку разрешение экрана становится более узким, 10:26

он также может быть не таким высоким, поэтому нам нужно немного пожертвовать пустым пространством. 10:29

выше и ниже определенных элементов экрана.10:35

Итак, далее мы переместим #телефон влево, 10:38

и мы собираемся установить наш blockquote { display: none;. 10:46

Теперь вы можете подумать, что это на самом деле скроет наши цитаты, и вы будете правы. 10:52

Здесь мы жертвуем несколькими менее важными элементами на странице. 10:57

в пользу увеличения размера других элементов.11:02

Помните, что по мере того, как экран становится меньше, 11:06

экранная недвижимость становится более ценной, 11:09

поэтому нам нужно начать избавляться от нескольких менее важных элементов экрана. 11:12

Далее мы собираемся установить #wrapper { 11:17

по ширине: 90%;.11:23

Теперь, если мы переключимся на application.css 11:26

и предварительно проверьте размер нашей обертки, 11:30

вы увидите, что он имеет ширину 70%. 11:34

Этот процент рассчитывается по ширине всей страницы. 11:37

поэтому, увеличив процент обертки, 11:42

мы, по сути, просто сужаем поля слева и справа. 11:46

Опять же, по мере того, как экран становится уже, экранное пространство становится более ценным. 11:51

поэтому нам нужно отказаться от некоторых пробелов слева и справа. 11:55

Это будет постоянная тема, так как экран становится меньше 11:59

и мы продолжим корректировать размер нашей обертки.12:02

Итак, давайте вернемся к rwd.css, 12:05

и еще раз, мы собираемся установить странный цвет кузова 12:12

и мы установим этот фон: красный;. 12:16

Итак, мы продолжим и вернемся к Google Chrome. 12:21

и обновите страницу, и, как вы можете видеть, наш фоновый цвет еще не применен, 12:23

так что это означает, что мы все еще в более широком разрешении экрана 12:29

чем на самом деле нацелен этот медиа-запрос.12:32

Итак, давайте продолжим и уменьшим размер нашего браузера. 12:35

и когда мы это сделаем, вы увидите, что он мгновенно становится красным. 12:38

Теперь то, что я заметил в этом конкретном макете 12:44

телефон на самом деле нажимает эту кнопку 12:47

а мы этого не хотим, так что давайте вернемся к TextMate 12:50

и вместо того, чтобы парить телефон влево, 12:56

давайте просто идти вперед и плавать его вправо. 12:59

Мы просто вернемся к Google Chrome и обновим страницу. 13:01

и там вы можете видеть, что наш телефон теперь плавает вправо 13:06

и мы устранили эту проблему; кнопка выглядит хорошо 13:10

и теперь мы можем видеть эти особенности внизу.13:13

@media для 2 разных разрешений

Я не уверен, правильно ли я понимаю. Вы хотите, чтобы поле 6px осталось до 991px, а затем -3px до 1200px и снова 6px? Если это так, я бы сделал это, как следующий CSS.

 .icons span {
   ширина: 25 пикселей;
   высота: 25 пикселей;
   поле слева: 6px;
}

@media (минимальная ширина: 991px) {
 . icons охватывают {
    поле слева: -3px;
  }
}


@media (минимальная ширина: 1200 пикселей){
 .значки охватывают{
    поле слева: 6px;
  }
}
 

или короткий:

 @media (минимальная ширина: 991 пиксель) и (максимальная ширина: 1200 пикселей) {
 .icons охват{
    поле слева: -3px;
  }
}
 

РЕДАКТИРОВАТЬ:

Я сделал демонстрацию для вас. Проверьте скрипку


Вы можете добавить больше мультимедиа в свой css. попробуйте добавить это после вашего медиа

 @media (max-width: 991px){
.os-значки охватывают{
  поле слева: 6px;
}
 

Если вы хотите использовать условие ИЛИ, вы можете использовать разделитель-запятую, чтобы указать это следующим образом:

 @media (min-width: 1200px), (max-width: 991px){
    .ОС-иконки охватывают{
      поле слева: 6px;
     }
 }
 

Вы можете разделить правила с помощью , .

 @media (минимальная ширина: 1200 пикселей), (минимальная ширина: 991 пикселей){
    . icons охват{
      поле слева: 6px;
     }
 }
 

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries?redirectlocale=en-US&redirectslug=CSS%2FMedia_queries#comma-separated_lists


Комментарии

  1. Медиа-запросы полезны, когда вы хотите изменить свой сайт или приложение и параметры (например, разрешение экрана или ширину области просмотра браузера).Несколько запросов можно комбинировать различными способами с помощью логических операторов.

  2. Запрос мультимедиа состоит из необязательного типа мультимедиа (все, портативное устройство, печать, ТВ и т. д.) и любого количества необязательных выражений, которые ограничивают время срабатывания запроса, таких как ширина, плотность пикселей или ориентация. Медиа-запросы являются частью CSS3 и позволяют разработчикам настраивать свой контент для различных средств представления.

  3. Что означает мультимедийный экран в CSS?

  4. Запросы мультимедиа CSS — дополнительные примеры. Давайте рассмотрим еще несколько примеров использования медиа-запросов. Медиа-запросы — популярный метод доставки адаптированной таблицы стилей на различные устройства. Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для разных устройств:

  5. На этой странице перечислены множество различных устройств и медиа-запросов, предназначенных специально для этого устройства. браузер рабочего стола или разрешение экрана рабочего стола

  6. В чем разница между «экраном» и «только экраном» в медиа-запросах? Последнее обновление: 07 марта 2019 г.Медиа-запрос используется для создания адаптивного веб-дизайна 

  7. screen: используется для установки размера экрана медиа-запроса. Размер экрана можно установить с помощью max-width и min-width. Это указание экрана в отличие от других доступных типов носителей, наиболее распространенным из которых является печать.

  8. Медиа-запрос — это метод CSS, представленный в CSS3. Он использует правило @media для включения блока свойств CSS, только если выполняется определенное условие.

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

  10. , Media Queries Level 5 предлагает новый набор мультимедийных функций, направленных на определение характеристик видео, включая цветовую гамму и динамический диапазон.Есть также предложения определять высоту, ширину и разрешение видео, но до сих пор не принято решение, являются ли это правильными способами обращения с видео.

  11. Запросы CSS Media для настольных компьютеров, планшетов и мобильных устройств. GitHub Gist: мгновенно делитесь кодом, заметками и фрагментами.

  12. Вы должны создать 2 файла CSS, в первом закодировать первый медиа-запрос, а во втором написать второй код медиа-запроса. Я знаю, что это элегантный способ сделать это, но он работает.

  13. разработчик.mozilla.org › › CSS: Каскадные таблицы стилей › Медиа-запросы

  14. Использование медиа-запросов — это популярный метод доставки адаптированных таблиц стилей (адаптивного веб-дизайна) на настольные компьютеры, ноутбуки, планшеты и мобильные телефоны. Вы также можете использовать медиа-запросы, чтобы указать, что определенные стили предназначены только для печатных документов или программ чтения с экрана (тип медиа: печать, экран или речь).

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

  16. Я тестировал на трех разных компьютерах с разными разрешениями, и все они работали .но мой клиент говорит, что у него это не работает, хотя разрешение экрана у него такое же, как у меня. Я думаю, что мне придется найти другое решение для этого. но большое спасибо за ответ! platzchen 09 нояб.

  17. В другой настройке я обновил свои медиа-запросы, пытаясь игнорировать большинство планшетов, но по-прежнему обслуживая смехотворно высокие телефоны с высоким разрешением, такие как HTC Droid DNA (1920×1080, вау). Для этого я просто добавил еще один медиа-запрос с новым условием под основным:

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

  19. Таким образом, Media Queries Level 5 предлагает новый набор мультимедийных функций, направленных на определение характеристик видео, включая цветовую гамму и динамический диапазон. Есть также предложения определять высоту, ширину и разрешение видео, но до сих пор не принято решение, являются ли это правильными способами обращения с видео.

  20. Вы можете использовать столько медиа-запросов, сколько пожелаете, в файле CSS. Обратите внимание, что вы можете использовать оператор и, чтобы потребовать, чтобы несколько запросов были истинными, но у вас есть

  21. . Вы можете использовать столько медиа-запросов, сколько хотите в файле CSS. Обратите внимание, что вы можете использовать оператор и, чтобы потребовать, чтобы несколько запросов были истинными, но вы должны использовать запятую (,) в качестве оператора или, чтобы разделить группы из нескольких запросов. Ключевое слово not также можно использовать для изменения логики.

  22. Получайте примеры кода, такие как «как добавить медиа-запрос во встроенный css», прямо из результатов поиска Google с помощью расширения Grepper Chrome.

  23. Опять же, CSS является наиболее распространенным местом для обнаружения медиа-запроса в дикой природе. Они идут прямо в таблице стилей в правиле @media, которое оборачивает элементы условиями для того, когда и где применять набор стилей, когда браузер соответствует этим условиям.

  24. Медиа-запросы для столбцов.Распространенное использование медиа-запросов — создание гибкого макета. В этом примере мы создаем макет, который варьируется от четырех, двух до 

  25. Медиа-запросы используются для следующих целей: Условное применение стилей с @media и @import at-правилами CSS. Чтобы настроить таргетинг на определенные медиа для элементов