@media screen для мобильных устройств


Содержание

«Как показать или скрыть контент на сайте для разных разрешений экрана?»

Управляем видимостью информации на разных устройствах

Адаптивный дизайн – залог успешного сайта, этот фактор влияет и на поисковую выдачу.

Адаптивный – это какой?

Адаптивный дизайн – тот, который подстраивается под разные разрешения экрана при этом не теряя своей привлекательности. Это может производится как и засчёт адаптации каждого элемента сайта, так и банальным управлением отображения/скрытия контента на мобильных устройствах. Процесс создание адаптивного дизайна достаточно трудный, но скрыть или показать блоки сайта в зависимости от разрешения можно за несколько минут.

Как сделать адаптивную вёрстку?

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

Как видно из первой строчки, стандартная максимальная ширина для десктопного разрешения экрана составляет 940 пикселей. Из второй строчки легко заметить, что если максимальное разрешение экрана устройства в ширину не более 991 пикселя, блок будет растягиваться максимум на 728, что предотвратит разрушение структуры шаблона и контент будет всегда в зоне видимости.

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

Как скрыть часть информации от мобильных устройств?

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

А после этого, добавить в style.css вашего сайта следующий фрагмент кода:

В этом случае, если разрешение экрана устройства менее 600 пикселей, контент, заключенный в этот div, на нём не отобразится. Значение max-width Вы можете поменять на своё усмотрение.

Как сделать информацию видимой только на мобильных устройствах?

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

Порядок действий схожий с предыдущим пунктом. Обернем нужный контент в новый div.

А после добавим в style.css сайта этот фрагмент кода:

Удачной вёрстки!

Как мы выяснили, при помощью несложных CSS-конструкций с применением media screen можно управлять отображением информации на странице. Также, предлагаю вам почитать каким должен быть продающий сайт и способы отправки HTML-писем.

Адаптивная верстка сайтов | Медиа-запросы

Медиа-запросы (Media Queries) — основной инструмент современного верстальщика сайтов, когда речь идет об адаптивной верстке. В двух словах медиа-запросы — это отдельные наборы правил в файле стилей CSS. Каждый из таких дополняющих наборов отвечает за тот или иной способ отображения сайта.

Например, за ширину окна конкретного девайса: настольного монитора, смартфона или планшета, а в случае с последними двумя также и за ориентацию в пространстве (альбомная или книжная или по-буржуйски landscape и portrait).

Принцип действия медиа-запросов

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

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

В самом простом виде медиа-запрос какбэ говорит: «Если окно браузера не более такого-то размера (задано в пикселях), то показывать сайт так-то и так-то… ».

@media screen and (max-width: 1000px) <
#content <
width: 75%;
float: left;
>
#sidebar <
width: 25%;
float: right;
>
>


Здесь медиа-запрос говорит, что если ширина экрана не более 1000 пикселей, то ширина основного блока (content) составит 75%, а ширина боковой колонки (sidebar) будет 25%. Надеюсь, все помнят, что в адаптивной верстке используется принцип «резиновой» разметки, поэтому все размеры в %, а не в пикселях.

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

Обратите внимание на синтаксис. Медиа-запрос — это типичный набор правил и заключен в фигурные скобки. Но в отличие от обычных правил CSS, в него могут входить другие наборы правил, также заключенные в фигурные скобки, причем друг от друга они никакими знаками не отделяются. Такой себе своеобразный вложенный дополнительный набор правил а ля «все в одном».

Словосочетание screen and следует читать так: «для всех устройств с цветным экраном И для тех, у кого экран меньше 1000 пикселей».

Позвольте, но ведь есть и гораздо меньшие устройства, как с этим быть? Очень просто! Пишем еще один медиа-запрос:

@media screen and (max-width: 480px) <
#content <
width: 100%;
float: none;
>
#sidebar <
width: 100%;
float: none;
>
>

Данный медиа-запрос говорит, что если ширина экрана окажется менее 480 пикселей, то сработает новый набор правил, где у обоих блоков ширина 100% и отменено обтекание. Очень удобно и наглядно.

Также очень легко можно настроить стили для отображения сайта в книжной или альбомной ориентации экрана. Например:

@media screen and (max-width: 320px) and (orientation: portrait) <
#content <
width: 75%;
float: none;
>
#sidebar <
width: 25%;
float: none;
>
>

@media screen and (max-width: 480px) and (orientation: landscape) <
#content <
width: 80%;
float: none;
>
#sidebar <
width: 20%;
float: none;
>
>

Эти два медиа-запроса говорят следующее: «Если экран не более 320 пикселей и расположен вертикально, то ширина основного блока составит 75%, а боковой колонки 25%. А если ширина не более 480 пикселей и расположение горизонтальное, то соответственно 80% и 20%.

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

Кроме того, в медиа-запросе можно устанавливать диапазон ширины экрана от минимального до максимального:

@media screen and (min-width: 200px) and (max-width: 480px) <
#content <
width: 80%;
float: none;
>
#sidebar <
width: 20%;
float: none;
>
>

Данная запись говорит, что набор правил этого медиа-запроса будет работать на устройствах (или при размере окна браузера настольного монитора) от 200 до 480 пикселей. Если будет больше или меньше, то правила не сработают. Иногда удобнее задавать именно диапазон действия медиа-запроса.

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

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

  • height — высота области просмотра;
  • device-width — ширина поверхности, на которой происходит просмотр (т.е. непосредственно ширина экрана конкретного девайса);
  • device-height — высота поверхности, на которой происходит просмотр;
  • orientation — ориентация экрана устройства (книжная или альбомная);
  • aspect-ratio — соотношение ширины и высоты в зависимости от ширины и высоты области просмотра. Например, широкоэкранный дисплей с соотношением сторон 16:9 может быть указан, как aspect-ratio: 16/9;
  • color — количество бит на каждый из цветовых компонентов. Например, min-color: 16 будет означать, что экран конкретного устройства имеет 16-битную глубину цвета;
  • и др.

На практике чаще всего используется только значение ширины области просмотра — width. Остальные характеристики пока еще экзотика. Есть некоторая разница между width и device-width. Об этом я, пожалуй, напишу отдельный пост, чтобы не перегружать тему. Скажу лишь, что использование device-width бывает полезным, когда ориентируешься на конкретный девайс. Фишка тут вот в чем:

Илон Маск рекомендует:  Как поместить progress bar на status bar

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

В результате, если вы в медиа-запросе зададите набор правил @media screen and (max-width: 480px), используя простой width, то на смартфоне все равно увидите сайт так, словно он просматривается на большом мониторе, только все будет очень мелким.

Происходит такая нестыковка как раз по причине «запаса» браузера мобильного устройства. Чтобы этого не случилось, нужно использовать в медиа-запросе не просто width, а именно device-width. Либо применять такую штуку как мета-тег viewport, но об этом в следующий раз.

Где лучше всего размещать медиа-запросы?

Как и любая часть файла стилей, медиа-запросы подчиняются тем же правилам, что и все остальные. То есть, порядок следования никто не отменял.

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

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


Как изменить html разметку в медиа-запросе

Нет ничего проще! Обычно медиа-запросы размещаются в том же файле стилей CSS, что и остальные правила, но в самом конце. Иногда их выносят в отдельный файл.

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

На этом по медиа-запросам все. Демо-сайт в качестве примера будет разобран в одной из ближайших статей. Так что оставайтесь на связи! И пишите вопросы в комментариях.

Медиа-запросы CSS

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

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

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

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

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

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

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

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

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

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

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

Mobile First или Desktop First?

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

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

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

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

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

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

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

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


Media queries CSS — шпаргалка основных медиа-запросов

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

Я оставлю шпаргалку основных медиа запросов (media queries), которые использую на практике сам. Понятное дело, что абсолютно все устройства эти запросы не покроют. При необходимости пишите свои media queries, проставляя нужные контрольные точки. Существует уже определённая статистика, согласно которой есть ряд особо популярных разрешений мониторов, на которые стоит ориентироваться в первую очередь. Вот такая статистика за 2020 год:

Разрешение Пользователей Динамика
1366×768 21.15 % -1.46%
360×640 18.28 % +2.31%
1920×1080 12.29 %-0.85% -0.85%
1280×1024 6.94 % -0.40%
1600×900 4.57 % -0.23%
375×667 4.36 % +0.48%
1024×768 4.08 % -0.26%
320×568 3.83 % +0.10%
1440×900 3.16 % -0.19%
1280×800 3.08 % -0.02%
1680×1050 2.03 % -0.25%
768×1024 2.00 % +0.07%
1536×864 1.93 % +0.22%
320×534 1.84 % +0.05%
320×570 1.62 % +0.09%
1280×720 1.42 % +0.04%
1360×768 1.05 % -0.22%

Шпаргалка Media queries CSS

Сервисы по проверке сайта на адаптивность

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

Sergey Smirnov

Так как я коммерчески занимаюсь разработкой сайтов, то недавно ко мне обратились с популярной сегодня просьбой адаптировать текущую верстку сайта ml-art.ru под мобильные устройства. Так как ранее я почти все шаблоны сайтов делал статическими, то в этот раз встал вопрос, а что делать, когда нужен 1 шаблон, который будет не одинаково, но достаточно удобно, просматриваться на разных устройствах (мобильные телефоны, планшеты, и так далее)?

Вот уже несколько лет существует такое понятие как Adaptive Design и Responcive Design. Если вы хотите разобраться в чем разница, то вы можете перейти по ссылкам, там некоторое колличество небезызвестных в рунете гиков, дискутируя на эту тему, таки приходят к понимаю того в чем же разница. Я так и не понял.

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

Несколько дней гугления и практики, дали мне понять, что в основе адаптивной верстки лежат следующие, достаточно простые и старые, принципы. Старые потому, что такое понятие как резиновая верстка, было введено еще динозавром отечественного сайтостроения, Атремием Лебедевым, и заключалось в запихивании всей верстки в таблицу, а ячейкам таблицы задавались процентные значения. Принцип резиновости от части сохранился и в адаптивном дизайне, но реализуется иначе.

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

2. Во-вторых, макет строится на основе сетки и является гибким. То есть в сравнении с резиновой, табличной версткой тут уже естественно нет никаких таблиц, а есть лишь grid-based layout или fluid grid, которая совместно с использованием % и em для значений css свойств font-size, line-height, height и width, а также с использованием media-queries для определения разрешений устройств, может содержать различное количество колонок. За счет этого и достигается динамика. То есть вы как бы говорите браузеру с какого устройства и с каким разрешением зашли на сайт, и подкладываете в зависимости от разрешения определенное количество колонок, или передаете определенное значение float: left или float: right или clear: both в зависимости от ситуации, а также масштабируете размеры шрифта заголовков и абзацев текста.

3. В третьих, изображения перестают быть статическими, и им задается динамическое значение ширины в пределах блока через css. То есть используется технология гибких изображений, flexible images, вы достигаете масштабирование изображений на 100% в пределах контейнера. Делается это через задание следующих css правил

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

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

Мобильные Таблетки ПК и ноутбуки
240*320
320*480\240
480*800
800*600\480
1024*768\600
От 1024 пикселей

Стандартный шаблон media-queries выглядит примерно так:

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

СSS3 Адаптивный веб дизайн — Медиа запросы

Что такое медиа запрос?

Медиа запрос — это CSS исполнение, представленный в CSS3.

Используется правило @media для включения блока свойств CSS, только если определенно условие true.

Пример

Если окно браузера 600 пикселей или меньше, цвет фона будет светло-голубым:


Добавление точки прерывания

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

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

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

Пример

Когда экран (окно браузера) становится меньше, чем 768 пикселей, каждый столбец должен иметь ширину 100 процентов:

@media only screen and (max-width: 768px) <
/* Для мобильных телефонов: */
[ ] <
width: 100%;
>
>

Всегда первый мобильный дизайн

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

Это означает, что мы должны внести некоторые изменения в CSS.

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

Пример

Еще одна точка прерывания

Можно добавить любое количество точек прерывания.

Мы также вставим точку прерывания между планшетами и мобильными телефонами.

Мы делаем это, добавляя еще один медиа запрос (600px) и набор новых классов для устройств, размер которых превышает 600 пикселей (но меньше, чем 768 пикселей):

Пример

Обратите внимание, что два набора классов почти идентичны, только разница в названии ( col- и col-s- ):

Может показаться странным, что у нас есть два набора одинаковых классов, но это дает нам перспективу в HTML, чтобы решить, что будет происходить со столбцами в каждом точка прерывания:

Пример HTML

Для компьютеров:

Первый и третий раздел будет охватывать каждые 3 столбца. Средняя часть будет охватывать 6 столбцов.

Для планшетов:

Первый раздел будет охватывать 3 столбца, второй — 9, и третий раздел будет отображаться ниже первых двух разделов, и он будет охватывать 12 столбцов:

Типичные устройства точка прерывания

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

Пример


/* Маленькие устройства (портретные планшеты и большие телефоны, 600px и выше) */
@media only screen and (min-width: 600px)

/* Средние устройства (альбомные планшеты, 768px и выше) */
@media only screen and (min-width: 768px)

/* Большие устройства (ноутбуки / настольные компьютеры, 992px и выше) */
@media only screen and (min-width: 992px)

/* Очень большие устройства (большие ноутбуки и настольные компьютеры, 1200px и выше) */
@media only screen and (min-width: 1200px)

Ориентация: Книжная/Альбомная

Медиа запросы также могут быть использованы для изменения формата страницы в зависимости от ориентация браузера.

Вы можете иметь набор свойств CSS, которые будут применятся, когда окно браузера шире, чем его высота, так называемый «Альбомная» ориентация:

Пример

Веб страница будет иметь светло-голубой фон, если ориентация в альбомном режиме:

Скрыть элементы с помощью медиа запросов

Другим распространенным использованием медиа запросов является скрытие элементов на экранах разного размера:

Пример

Изменение размера шрифта с помощью медиа запросов

Вы также можете использовать медиа запросы для изменения размера шрифта элемента на различных размерах экранов:

Переменный размер шрифта.

Пример

в 80px */
@media only screen and (min-width: 601px) <
div.example <
font-size: 80px;
>
>

/* Если размер экрана 600px или менее, установите размер шрифта

CSS Справочник @media

Для полного обзора всех типов носителей и функций / выражений, пожалуйста, посмотрите @media правило в нашем справочнике CSS.

Адаптивная верстка: media queries

Добрый день, уважаемые читатели!

Сегодня я бы хотел продолжить обсуждение адаптивной верстки.

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

На небольших экранах изображения будут слишком мелкими.

Как решить проблему? Media Queries!

Данную проблему можно решить благодаря новой возможности CSS: media queries.


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

В результате, если у пользователя экран меньше или равен 960 пикселей, то задний фон для класса . >красным .

Таким образом мы может подстраивать наши стили под каждый экран в отдельности.

Условия для Media Queries

Условия можно задать следующие условия:

Лично я чаще всего использую первое условие.

Способы подключения CSS-таблиц

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

Практика

Давайте доработаем пример из прошлой статьи:

HTML

CSS

Что получилось? Смотрим: демонстрация 1

При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.

Решим нашу проблему!

Добавляем Media Queries

Добавим в CSS следующий код:

Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).

В результате фотографии на экране планшета стали выглядеть намного лучше!

Теперь разберемся с экраном поменьше.

После добавления этого кода при разрешении экрана меньше либо равного 480 пикселей, изображения вновь перестраиваются и теперь отображаются по одному в ряд.

Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).

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

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

Подписывайтесь на рассылку ��

Что-то осталось неясным, неточным? Пишите в комментариях!


Автор статьи: Alex. Категория: CSS
Дата публикации: 16.12.2013

Адаптируем сайты с помощью медиа-запросов @media

Задача

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

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

Решение

Подключаем разные таблицы стилей CSS для разных разрешений экрана. Разрешения экрана ловим медиа-запросами @media.

@media screen and (min-device-width: 1600px) <

ваши стили CSS для этого разрешения

Теперь нужно просто указать все разрешения и предусмотреть возможные устройства для корректного отображения вашего сайта. Будем указывать возможные разрешения диапазонами, к примеру от 1024px до 1280px. Мы не затронем того, какие логические операторы используются в медиа-запросах. Подробная информация про них здесь.

and (orientation: portrait) and (device-width:768px) <

ваши стили CSS для этого разрешения

and (orientation: portrait) and (min-device-width : 320px) and (max-device-width : 700px) <

ваши стили CSS для этого разрешения

and (min-width: 768px) and (max-width: 1024px)

ваши стили CSS для этого разрешения

(max-width:640px) and (orientation:landscape)

ваши стили CSS для этого разрешения

Дипазон разрешения экрана:

and (min-width:1024px) and (max-width:1279px)

ваши стили CSS для этого разрешения

Дипазон разрешения экрана:

and (min-width:1280px) and (max-width:1365px)

ваши стили CSS для этого разрешения

Дипазон разрешения экрана:

and (min-width:1366px) and (max-width:1439px)

ваши стили CSS для этого разрешения


Дипазон разрешения экрана:

and (min-width:1440px) and (max-width:1599px)

ваши стили CSS для этого разрешения

Дипазон разрешения экрана:

and (min-width:1600px) and (max-width:1919px)

ваши стили CSS для этого разрешения

Дипазон разрешения экрана:

and (min-width:1920px) and (max-width:2559px)

ваши стили CSS для этого разрешения

Дипазон разрешения экрана:

ваши стили CSS для этого разрешения

Эти медиа-запросы позволяют перекрыть почти все устройства, что сегодня существуют. Появляется экзотика с разрешением в 4K и 5K. С ними нужно экспериментировать отдельно.

Адаптивный сайт с помощью Media Queries

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

Как сделать правильно?

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

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

В последнее время выявлены серьёзные изменения, разбивающие этот стереотип. Дело в том, что подавляющее пользователей перешли с настольных компьютеров на планшеты и мобильные устройства. Уверен, каждый это заметил и сам активно используют свои портативные девайсы. И это не вся проблема!

Помимо мобильных устройств в ход пошли широкоформатные мониторы, которые разбивают старый стереотип на мелкие кусочки. Вёрстка сайта начинает съезжать и некорректно отображаться. Решение этой проблемы не заставило себя ждать!

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

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

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

Адаптивный дизайн с Media Queries

О нововведениях в HTML5 мы уже говорили, но ещё одно преимущество раскрывается именно в его использовании в адаптивности сайта. В совместном использовании с CSS3 появляется возможность использовать такую интересную спецификацию, как Media Queries.

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

Преимущество адаптивного сайта:

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


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

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

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

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

Подробно о Media Queries

При качественной вёрстке и создания адаптивного сайта, корректность работы гарантирована, без всевозможных проблем.

Использование Media Queries имеет своеобразный синтаксис:

«Как показать или скрыть контент на сайте для разных разрешений экрана?»

Управляем видимостью информации на разных устройствах

Адаптивный дизайн – залог успешного сайта, этот фактор влияет и на поисковую выдачу.

Адаптивный – это какой?

Адаптивный дизайн – тот, который подстраивается под разные разрешения экрана при этом не теряя своей привлекательности. Это может производится как и засчёт адаптации каждого элемента сайта, так и банальным управлением отображения/скрытия контента на мобильных устройствах. Процесс создание адаптивного дизайна достаточно трудный, но скрыть или показать блоки сайта в зависимости от разрешения можно за несколько минут.

Как сделать адаптивную вёрстку?

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

Как видно из первой строчки, стандартная максимальная ширина для десктопного разрешения экрана составляет 940 пикселей. Из второй строчки легко заметить, что если максимальное разрешение экрана устройства в ширину не более 991 пикселя, блок будет растягиваться максимум на 728, что предотвратит разрушение структуры шаблона и контент будет всегда в зоне видимости.

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

Как скрыть часть информации от мобильных устройств?

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

А после этого, добавить в style.css вашего сайта следующий фрагмент кода:

В этом случае, если разрешение экрана устройства менее 600 пикселей, контент, заключенный в этот div, на нём не отобразится. Значение max-width Вы можете поменять на своё усмотрение.

Как сделать информацию видимой только на мобильных устройствах?

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

Порядок действий схожий с предыдущим пунктом. Обернем нужный контент в новый div.

А после добавим в style.css сайта этот фрагмент кода:

Удачной вёрстки!

Как мы выяснили, при помощью несложных CSS-конструкций с применением media screen можно управлять отображением информации на странице. Также, предлагаю вам почитать каким должен быть продающий сайт и способы отправки HTML-писем.

Илон Маск рекомендует:  Что такое код is_writeable
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL