Media для мобильных устройств – Как задать media queries только для планшетов и смартфонов без привязки к разрешению?

Содержание

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

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

/* monitors and laptops */
@media screen and (min-width: 1240px)  {}

/* tablet */
@media screen and (min-width: 1024px) and (max-width: 1240px)  {}

@media screen and (min-width: 768px) and (max-width: 1024px) {}

/* mobile */
@media screen and (max-width: 768px) {}

/* iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {}

/* iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

/* iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

/* Retina iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Retina iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {}

/* Retina iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}

/* iPad 1 & 2 in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}

/* iPad 1 & 2 in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad 1 & 2 in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}

/* iPad mini in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad mini in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad mini in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPhone 5 in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}

/* iPhone 5 in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}

/* iPhone 5 in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}

/* iPhone 2G-4S in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

/* iPhone 2G-4S in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}

/* iPhone 2G-4S in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}

Шаблоны media-queries для адаптации макетов для мобильных устройств

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

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

https://github.com/web-standards-ru/dictionary/issues/84
https://www.responsys.com/blogs/nsm/cross-channel-marketing/difference-responsive-adaptive-web-design/
http://alistapart.com/article/responsive-web-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 правил


div {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
    display: block;
}
div img {
    width: 100%;
    height: auto;
    display: block;
}

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

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

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

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


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

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

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

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

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

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

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

 

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

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

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

Рассмотрим пример:

@media screen and (max-width: 960px) {
    .class {
        background: red;
    }
}

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

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

 

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

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

@media screen and (max-width: XXXpx) { } @media screen and (min-width: XXXpx) { } @media screen and (min-width: XXXpx) and (max-width: YYYpx) { } @media screen and (max-device-width: XXXpx) { }

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

 

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

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

<link rel="stylesheet" media="screen and (max-width: 960px)" href="big.css" />
<link rel="stylesheet" media="screen and (min-width: 480px)" href="small.css" />

<!-- для iPhone 4 -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

<!-- для iPad portrait and landscape -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

 

 Практика

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

HTML

<h2>...</h2>
<div>
    <div>
        <img src="../images/1.jpg" title="Деревья, листики..." />
    </div>
    <div>
        <img src="../images/2.jpg" title="Зима"  />
    </div>
    ...
</div>

CSS

h2 {
    font-size: 24px;
    text-align: center;
}
div.image_gallery {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
img {
    float: left;
    max-width: 31%;
    height: auto;
    padding: 1%; /* небольшие оступы для изображений */
}

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

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

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

 

Добавляем Media Queries

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

/* прошлый CSS */
h2 {}
div.image_gallery {}
img {}

@media screen and (max-width: 768px) { /* разрешение планшета */
    h2 {
        font-size: 20px;
    }
    div.image_gallery {
        min-width: 320px;
    }
    img {
        max-width: 48%; /* 2 изображения в ряд */
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

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

Демонстрация 2

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

 

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

@media screen and (max-width: 480px) { /* разрешение смартфона */
    h2 {
        min-width: 320px;
        font-size: 16px;
    }
    div.image_gallery {
        width: 320px;
        min-width: 320px;
    }
    img {
        max-width: 98%;
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

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

Демонстрация 3

 

Итог

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

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

 

Демонстрация 1

Демонстрация 2

 

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

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

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

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

настройка дизайна писем для мобильного телефона

Понимание медиа-запросов в электронной почте HTML

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

ЧТО ТАКОЕ МЕДИА-ЗАПРОС?

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

Медиа-запрос состоит из трех частей: типа носителя, выражения и правил стиля, содержащихся в самом запросе медиа.

Понимание медиа-запросов в электронной почте HTML

Тип мультимедиа позволяет нам объявить, к какому типу медиа должны применяться правила. Есть четыре варианта, которые можно объявить: все, печать (print), экран(screen) и речь(speech). Для электронной почты вы почти всегда можете использовать тип screen.

Понимание медиа-запросов в электронной почте HTML

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

максимальная и минимальная ширина

максимальная и минимальная ширина устройства

пиксельное соотношение устройства

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

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

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

ПРЕИМУЩЕСТВА МЕДИА-ЗАПРОСОВ

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

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

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

БЫСТРЫЙ ПРИМЕР

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

Итак, допустим, у нас есть таблица контейнеров с фиксированной шириной 600 пикселей. В этом случае мы хотим переключить фиксированную ширину 600 пикселей в виде рабочего стола на текучую процентную ширину (100%) на меньших экранах.

<table border="0" cellpadding="0" cellspacing="0" >

<table border="0" cellpadding="0" cellspacing="0"  width="600">

Вы заметили, что класс добавлен в таблицу контейнеров. Мы можем использовать переключатель fixed-to-fluid, используя классы для обозначения и назначения HTML-элементов и используя наш медиа-запрос для переопределения стилей, применяемых к таблице. Каждому классу требуется имя, и в этом случае мы назвали нашу таблицу .container-table . Мы предлагаем дать классам очевидные имена, которые говорят об их целью в медиа-запросе.

/* TYPICAL WEB DESIGN METHOD */ .container-table {}

/* TYPICAL WEB DESIGN METHOD */ .container-table {}

Как только мы добавили имя класса в тег таблицы, нам нужно добавить медиа-запрос в нашего HTML вместе с выражением и тем же именем класса. Выражение, которое мы использовали, max-width: 600px, сообщает медиа-запросу применять правила в любое время, когда размер экрана меньше 600 пикселей.

@media screen and (max-width:600px) { .container-table { } }

@media screen and (max-width:600px) { .container-table { } }

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

@media screen and (max-width:600px) { .container-table { width: 100% !important; } }

@media screen and (max-width:600px) { .container-table { width: 100% !important; } }

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

@media screen and (max-width:600px) { .mobile-text { font-size: 18px !important; } }

@media screen and (max-width:600px) { .mobile-text { font-size: 18px !important; } }

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

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

Это можно сделать, используя важное объявление:

td { font-size: 24px !important; font-weight: bold !important; }

td { font-size: 24px !important; font-weight: bold !important;  }

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

РАСШИРЕННЫЙ ТАРГЕТИНГ

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

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

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

Видеофайлы поддерживаются только некоторыми браузерами на основе Webkit, а именно Apple Mail и Outlook 2011 для Mac. В то время как в других почтовых клиентах видно фоновый цвет и фоновое изображение (при их поддержке), благодаря следующему мультимедийному запросу в клиентах на основе Webkit можно просмотреть полноэкранное видео, воспроизводимое в фоновом режиме:

Понимание медиа-запросов в электронной почте HTML

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

@media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert styles here */ }

@media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert styles here */ }

Подобные выражения могут использоваться на целом ряде устройств на основе их возможностей. Например, если вы хотите настроить таргетинг на iPhone X в стандартном представлении, вы можете использовать следующее:

@media screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { /* Insert styles here */ }

@media screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { /* Insert styles here */ }

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

ПОДДЕРЖКА

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

Поддержка медиа-запросов в почтовых клиентах

Android 4.4 — да

Gmail app (Android) — нет

Gmail app IMAP (Android) — да

iOS — да

Inbox by Gmail (Android) — да

Inbox by Gmail (iOS) — да

Outlook (Android) — да

Outlook (iOS) — да

Samsung Mail (Android) — да

Yahoo! Mail app (Android) — да

Yahoo! Mail app (iOS) — да

Apple Mail 10 — да

Outlook 2000-03 — да

Outlook 2007-16 — нет

Outlook for Mac — да

Thunderbird — да

Windows 10 Mail — нет

AOL Mail — нет

Gmail — да

G Suite — нет

GMX.de — да

Inbox by Gmail — да

Libero — да

Office 365 — нет

Orange.fr — нет

Outlook.com — нет

Gmail — да

SFR.fr — да

T-online.de — нет

Web.de — да

Yahoo! Mail — да

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

УЛУЧШИТЕ СВОИ КАМПАНИИ

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

Автор: Jason Rodriguez

Источник: https://litmus.com/

Редакция: Команда webformyself.

Понимание медиа-запросов в электронной почте HTML

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Понимание медиа-запросов в электронной почте HTML

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

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



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

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

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

Пример

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

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Редактор кода »

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

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

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


Компьютер
Телефон

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

Пример

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

/* Для настольных компьютеров: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

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

Редактор кода »

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

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

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

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

Пример

/* Для мобильных телефонов: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* Для настольных компьютеров: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

Редактор кода »

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

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

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


Компьютер
Планшет
Телефон

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

Пример

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

/* Для мобильных телефонов: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* Для планшетов: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* Для настольных компьютеров: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

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

Пример HTML

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

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

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

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

<div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Редактор кода »

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

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

Пример

/* Очень маленькие устройства (телефоны, 600px и ниже) */
@media only screen and (max-width: 600px) {...}

/* Маленькие устройства (портретные планшеты и большие телефоны, 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, которые будут применятся, когда окно браузера шире, чем его высота, так называемый "Альбомная" ориентация:

Пример

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

@media only screen and (orientation: landscape) {
    body {
       background-color: lightblue;
    }
}

Редактор кода »

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

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

Я буду прятаться на маленьких экранах.

Пример

/* Если размер экрана 600 пикселей в ширину или меньше, скройте элемент */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Редактор кода »

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

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

Пример

/* Если размер экрана 601px или кроме того, установите размер шрифта в 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* Если размер экрана 600px или менее, установите размер шрифта <div> в 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Редактор кода »

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

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


Какой должен быть порядок следования @media queris при формате «Сначала десктоп»?

Приветствую.
Многие пишут, в том числе и основоположник "теории" - Сперва мобильные, о том, что логичным и очевидным является использование media queris в порядке от меньшего разрешения к большему. К примеру человек, написавший пост на этой странице утверждает о том, что:
Браузер высчитывает реальное значение min-width исходя из размеров окна браузера, а max-width — от разрешения экрана, соответственно при разрешении 1920px сработают max-width(480px), max-width(800px) и так далее, вплоть до max-width(1920px).

Я проверил, проверил несколько раз и, либо у него лыжи не едут, либо у меня. max-width срабатывает при разрешении меньшем, чем обозначено в нем, а не наоборот.

Хотелось бы разобрать следующее высказывание:

Браузер высчитывает реальное значение min-width исходя из размеров окна браузера, а max-width — от разрешения экрана

Вообще не понятно как это применительно в реальности. Если контрольная точка была сделана на отметке 480 пикселей, то правила указанные в ней - min-width или max-width, будут срабатывать при размере окна браузера, либо в большую, либо в меньшую стороны соответственно. Так? Если так, то какой смысл в этой фразе?

Теперь о порядке следования media queries. Как мне представляется, при использовании формата от дестопного варианта дизайна к мобильному, сначала в таблице стилей идут правила без указания правил media queries, а затем при уменьшении размеров дизайна (его отображения), должны вступать в действие media queries в порядке убывания - от большего к меньшему:

@media (max-width: 900px)
@media (max-width: 800px)
@media (max-width: 700px)
@media (max-width: 600px)
и так далее, вплоть до самого меньшего разрешения окна.

Кстати в чем заключается разница между следующими запросами и какой из них лучше использовать?

@media (max-width: 900px){}
@media screen and (max-width: 900px){}
@media only screen and (max-width: 900px){}

Применение CSS в мобильных приложениях

Применение CSS в мобильных приложениях

Последнее обновление: 31.10.2015

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

В CSS2 уже было решение в виде правила media, которое позволяет указать устройство, для которого используется данный стиль:


<html>
 <head>
  <title>Мобильный сайт</title>
  <link media="handheld" rel="stylesheet" href="mobile.css">
  <link media="screen" rel="stylesheet" href="desktop.css">
 </head>
 <body>
 ......................

Правило media="handheld" указывает, что стили в mobile.css будут применяться к мобильным устройствам, в то время как правило media="screen" применяется к десктопным сайтам.

Однако многие современные мобильные браузеры по умолчанию считают, что страница предназначена для десктопов, поэтому в любом случае применяет правило media="screen". Поэтому на подобное решение не стоит полагаться.

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


<html>
 <head>
  <title>Мобильный сайт</title>
  <link rel="stylesheet" type="text/css" media="screen" href="desctop.css" />
  <link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)" href="mobile.css" />
 </head>
 <body>
 ................................

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

Как вариант, можно использовать правила CSS3 Media Query в самом файле css:


@media screen{
	body {
		background-color: red;
	}
	/*Далее остальные стили*/
}
@media screen and (max-device-width:480px){
	body {
		background-color: blue;
	}
	/*Далее остальные стили*/
}

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


/*Стили только для смартфонов*/
@media screen and (max-device-width:480px){
	body {
		background-color: blue;
	}
	/*Далее остальные стили*/
}
/*Стили только для планшетов*/
@media screen and (min-device-width:481px){
	body {
		background-color: red;
	}
	/*Далее остальные стили*/
}
/*Стили только для десктопов*/
@media screen and (min-width:769px){
	body {
		background-color: yellow;
	}
	/*Далее остальные стили*/
}

Применяемые функции в CSS3 Media Query:

  • aspect-ratio: отношение ширины к высоте области отображения (браузера)

  • device-aspect-ratio: отношение ширины к высоте экрана устройства

  • max-width/min-width и max-height/min-height: максимальная и минимальная ширина и высота области отображения (браузера)

  • max-device-width/min-device-width и max-device-height/min-device-height: максимальная и минимальная ширина и высота экрана мобильного устройства

  • orientation: ориентация (портретная или альбомная)

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


/*Стили для портретной ориентации*/
@media only screen and (orientation: portrait){

}
/*Стили ландшафтной ориентации*/
@media only screen and (orientation: landscape){

}

Таким образом, мы меняем лишь определение стилей в зависимости от устройства, а сами стили css по сути остаются теми же, что мы используем для создания обычных сайтов. Теперь посмотрим, как мы можем создавать мобильные приложения непосредственно на платформе ASP.NET MVC 4.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *