Css media для разных разрешений. Адаптивный и мобильный дизайн с CSS3 Media Queries
Фокусная (фокальная) точка - термин, который часто используют фотографы и блоги о фотосъемке. Они говорят: «Создайте фокусную точку. Она должна быть первым и последним местом снимка, на котором останавливается взгляд». Конечно, это правильная мысль, но как и с большинством других вещей, сказать легче, чем сделать.
Примечание: Оригиналы можно увидеть на сайте автора - Versa Photography .
Проработанная фокусная точка - это как знак препинания в конце аккуратно составленного предложения. Важно уметь не только выделять правильную фокусную точку, но также составлять предложение, идущее перед ней.
Прежде всего, подумайте о том, что нужно для наилучшей фокусной точки, наилучшего знака препинания. Есть несколько вещей, на которые взгляд обращается в первую очередь, ведь мозг обрабатывает визуальную информацию по одному принципу: высококонтрастные и резкие участки, лица, люди и животные, самые выделяющиеся цвета (обычно теплые тона, например, желтый) и узнаваемые предметы, которые выглядят крупнее (и из-за этого кажутся ближе). Для эффективной расстановки знаков препинания в вашем визуальном предложении понадобится объект или сущность, которая привлекает интерес и удовлетворяет хотя бы один пункт списка.
Дорога возле реки Саиэтл, Вашингтон. Схема композиции
Затем нужно учесть, что создает не просто фокусную точку, а заметную фокусную точку. Теперь начинайте писать предложение.
Когда снимаете определенный кадр, ищите способы упростить и упорядочить вид так, чтобы либо указывать на фокусную точку, либо изолировать ее. Именно здесь начинают работать такие правила композиции, как золотое сечение и правило третей. Размещение фокусной точки в этих идеальных участках кадра обеспечит достаточно места, чтобы подчеркнуть ее линиями, узорами или размытым движением. Экспериментируйте с углами и позицией камеры, разрушив привычный способ видения и сделав снимок интересным.
Мыс Разочарования, Вашингтон. Схема композиции.
На своих снимках я называю это «сборной геометрией». Можно легко отрегулировать такие вещи, как яркость, цвет и резкость при помощи ПО для обработки, но жесткие направляющие и структуру кадра - геометрию - отрегулировать почти нереально. Это можно сделать, но проще сэкономить время на превращении трехмерного мира в двумерную фотографию во время съемки.
Последний шаг, который сделает снимок идеальным - аккуратно отполировать результат при помощи софта. Используйте корректирующие слои кривых и уровней для определенных участков (или примените корректирующие кисти Lightroom), чтобы отрегулировать яркость и контраст фокусной точки и дополнительных участков, создав визуальную иерархию для передачи глубины. Фокусная точка должна иметь более высокий контраст (в зависимости от снимка, она будет выглядеть темнее или светлее), а места с низким контрастом и темными тонами будут играть второстепенную роль.
Посмотрите на снимок целиком - уменьшите его или сделайте временно размытым, если нужно затушевать лишние детали - и проанализируйте местность, которая окружает фокусную точку. Нужно подстегнуть альтернативные более темные или светлые участки, которые усиливают и формируют друг друга, поднимаясь по направлению фокусной точки. Управляйте вниманием и интересом, разумно используя такие концепты, как контрастное сопоставление. Найдите ритм чередования тональных значений, который подчеркивает путь, по которому должен следовать взгляд.
Лес в парке Арройо. Схема композиции
Помимо этого рецепта для заметной фокусной точки, подумайте о том, что создает шедевры: эмоции. Делайте впечатляющий графический контент с заметной фокусной точкой и поддерживающей визуальной иерархией. Затем поймите, что можно указать на что-то кроме визуального. Эмоциональное содержимое - это то, как вы делаете искусство. Воспользуетесь визуальным языком, чтобы указать на характеристику, которую нельзя увидеть, а можно только почувствовать. Если вам удастся воспользоваться эмоциональной составляющей, чтобы также указать на фокусную точку, то вы получите по-настоящему мощный снимок.
Мы - животные, прежде всего мы видим контраст и графическое содержимое. Мы задерживаем взгляд только чтобы почувствовать, цепляет ли нас изображение. Художник должен быть одновременно животным и чувствующим человеком. Замечайте и создавайте графический и эмоциональный контент. Подчеркивайте каждый из них и становитесь лучше в том, что делаете.
Во времена Шекспира аудитория не была столь привередлива и притязательна, как сейчас. Это были довольно неотёсанные и безграмотные люди, которые хотели получить немного моментного удовольствия после тяжелого рабочего дня. Драматурги, жившие и творившие после него, старались вызывать сильные эмоции у толпы, иначе они рисковали не суметь захватить внимание аудитории и быть прилюдно опозоренными.
Что помогло Шекспиру стать знаменитым среди жителей тех времен, так это тактика привлечения внимания аудитории с помощью привлекательных элементов, таких как пение под музыку, яркие костюмы и запоминающиеся диалоги. Сегодня, инновации и технологические достижения сильно изменили наши вкусы и предпочтения, если сравнивать с людьми из средневековья. Однако, возможно именно благодаря этим достижениям мы все такие же беспокойные, а может даже еще более беспокойны, чем наши средневековые предки.
Как и в других сферах деятельности, во время разработки веб-сайта важно учитывать, что внимание пользователя очень подвижно. Пользователь перемещается от одной страницы к другой за считанные секунды и если ваш сайт не сможет поймать и удержать его внимание, то это совершенно неэффективный ресурс.
В данном случае, я часто советую знакомым дизайнерам приобщиться к подходу Шекспира и использовать маленькие и яркие детали, чтобы привлечь внимание. В веб-дизайне эти детали называются фокальными точками (центрами) .
Фокальные центры, это части веб-сайта, имеющие целью привлечь к себе внимание человека, просматривающего страницу. Фокальные точки выделяются на фоне других компонентов веб-дизайна.
Фокальные центры могут иметь почти магический эффект на посетителей, приковывая взгляд к определенным элементам и сохраняя нужный уровень внимания, чтобы пользователь «принял сообщение ». Однако, создание фокальных точек на вашем сайте может быть довольно непростой задачей. С помощью описанных ниже советов, я попытался максимально её упростить.
Расположение
Как и для зданий — объектов риэлторского бизнеса, наиболее важным параметром для фокальных центров является их расположение. Даже несмотря на наличие хорошо выглядящих фокальных точек , некоторые сайты производят впечатление дешевизны из-за их (точек) неправильного расположения. Очевидно, что фокальные точки должны быть размещены в самых видных (или наиболее часто просматриваемых) местах и есть несколько способов, чтобы их определить. Первый, это дизайнерское чутье, с помощью которого мы можем интуитивно располагать фокальные центры там, где, как нам кажется, они будут наиболее заметны.
Однако, немногие дизайнеры имеют такое развитое чутье, поэтому есть другие, более конкретные пути это сделать, то есть воспользоваться техниками тестирования удобства использования (тестирование на юзабилити, usability testing ). Если перед запуском веб-сайта дизайнер приложит некоторые усилия по организации тестирования удобства использования с помощью группы пользователей, то, по результатам наблюдений, он будет точно знать, куда чаще всего падает взгляд потенциальных посетителей.
Хотя личное чутье тоже можно использовать в поиске оптимального места расположения фокальных точек , этот способ дает менее гарантированный результат для большинства дизайнеров, чем тестирование на юзабилити.
Частота
После расположения, вторым важным вопросом является частота расположения фокальных точек на сайте. Несколько лет назад, если бы вы задали этот вопрос любому практикующему веб-дизайнеру, то наиболее вероятно получили бы ответ: «Одного фокального центра достаточно ». Это может быть отличным выбором для небольших страниц. Однако, как только стало появляться много сайтов с длинной полосой прокрутки, идея одной фокальной точки стала звучать абсурдно. Также, для определенных вебсайтов фокальную точку необходимо вставлять на каждой следующей странице, как например, в случае онлайн-магазина одежды с сообщением о новых поставках или скидке в 50%.
Количество фокальных центров очень сильно зависит от содержания и типа сайта. На некоторых ресурсах, одно большое изображение или гигантский текст, написанный на самом видном месте, может отлично выполнять задачу фокусировки внимания.
Тем не менее, я предлагаю вам использовать как минимум три фокальных точки для эффективной передачи информации посетителю. Иногда, важно иметь несколько фокальных центров, которые бы взаимно дополняли друг друга. Примером этого может служить случай, когда на странице размещается большое изображение, а рядом располагается текст, который дает пояснение.
Элементы
После выяснения того, где и как часто расположить фокальные точки , давайте обсудим различные элементы, которые мы можем использовать в качестве фокальных центров нашего веб-сайта.
Текст и его написание
Изменение текста и его написания это отличный способ управлять вниманием посетителей. Однако это требует от вас отлично развитого дизайнерского чутья.
К выбору подходящего шрифта, его написания, цвета и размера, а также к подбору расстояний между буквами, словами и строками следует отнестись очень серьезно, чтобы грамотно выделить текст, находящийся в фокальной точке относительно остального текста.
Графика, изображения и иллюстрации
Картинка стоит тысячи слов и является отличным способом передать информацию без необходимости делать многословное описание. Поэтому, призывающие к действию, яркие и мигающие кнопки являются отличными графическими элементами, которые фокусируют внимание пользователя на определенных точках.
Вы можете использовать иллюстрации и иконки, чтобы обозначить главную тему вашего веб-сайта. Очень часто это помогает надолго оставить сильный отпечаток в памяти посетителя.
Пустое место
Минимализм это подход, набирающий обороты среди дизайнеров. Это хороший способ выделить фокальные точки на вашей странице. Намного проще выделить элемент на белом фоне, нежели «проталкивать » его через множество разноцветных графических элементов.
Пустое пространство служит своего рода буфером, который автоматически направляет внимание посетителя на выделяющиеся элементы. Компания Apple может служить отличным примером очень длительного и успешного использования минималистического подхода. Белый цвет означает меньше отвлечения, а это, в свою очередь, лучшую фокусировку на фокальных точках .
«Выставка» вебсайтов с отлично расположенными фокальными центрами
После того, как были даны различные советы на тему использования фокальных точек , вашему вниманию предлагается небольшая «выставка» веб-сайтов, на которых очень грамотно расположены фокальные точки. Среди «экспонатов » этой «выставки» вы сможете увидеть наглядные примеры различных способов использования фокальных центров: от пустого пространства до хитрого расположения изображений, шрифтов и цветов. Этот список включает в себя лучшие в плане дизайна сайты в интернете, награжденные и признанные различными дизайнерскими организациями.
Koa Water
iPolecat
Ride Four Ever
Wrist
Grind Spaces
The Pete Design
Mosne
Jeremy Levine
Caramel Budgie
CSS правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Имеет широкое применение в адаптивном веб-дизайне.
Поддержка браузерами
| Свойство | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| @media | 21.0 | 3.5 | 9.0 | 4.0 | 9.0 | 12.0 |
CSS синтаксис:
@media not | only media type and (media function ) { ...код CSS }Давайте детально разберем из чего состоит синтаксис этого правила.
Логические операторы
Вы можете комбинировать медиазапросы с использованием логических операторов:
| Значение | Описание |
|---|---|
| and | Оператор and ("И" ) используется для объединения нескольких медиазапросов в один. |
| not | Оператор not ("Логическое НЕ" ) обращает результат - если медиазапрос был истинным без "not" , то он станет ложным , и наоборот. |
| only | Оператор only ("Только" ) может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиазапрос (игнорируют), содержащий в себе этот логический оператор. |
| , | Оператор "," позволяет объединить несколько медиазапросов через запятую. Если хотя бы один запрос возвращает "true" (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR ("ИЛИ" ). |
Устройства (media type)
Вы можете использовать медиазапросы для конкретных типов устройств:
| Значение | Описание |
|---|---|
| all | Подходит для всех типов устройств. Это значение по умолчанию. |
| aural | Предназначено для речевых синтезаторов . |
| braille | Устройства для чтения шрифта Брайля (рельефно-точечный тактильный шрифт, предназначенный для письма и чтения незрячими и плохо видящими людьми). Значение считается устаревшим. |
| embossed | Устройства, предназначенные для печати шрифта Брайля. Значение считается устаревшим. |
| handheld | Предназначено для портативных устройств (маленький экран и ограниченная полоса пропускания - bandwidth ). Значение считается устаревшим. |
| Предназначен для печатных страниц и для режима предварительного просмотра печати. | |
| projection | Устройства проекционного типа (проекторы ). Значение считается устаревшим. |
| screen | Экраны компьютера. |
| speech | Речевые синтезаторы, устройства для чтения с экрана (для чтения страниц вслух). |
| tty | Устройства, которые используют набор символов фиксированной ширины , например, телетайпы или терминалы. Значение считается устаревшим. |
| tv | Устройства телевизионного типа (низкое разрешение, ограниченные возможности прокрутки, возможность передачи звука). Значение считается устаревшим. |
Мультимедийные функции (media function)
| Значение | Описание |
|---|---|
| aspect-ratio | Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio : 5/4 (соотношение пять к четырем). |
| color | Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. . Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент. |
| color-index | Количество цветов, которое устройство может отображать. |
| device-aspect-ratio | Соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: device-aspect-ratio : 5/4 (соотношение пять к четырем). Media Queries Level 4 " . |
| device-height | Определяет высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| device-width | Определяет ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| grid | Определяет основано ли выходное устройство на сеточной системе (например, терминал "tty" или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1 , если устройство растровое, то значение будет равно 0 . |
| height | Задает высоту области просмотра (используются ). |
| max-aspect-ratio | Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. |
| max-color | Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения . |
| max-color-index | Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
| max-device-aspect-ratio | Масимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| max-device-height | Определяет максимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| max-device-width | Определяет максимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| max-height | Задает максимальную высоту области просмотра (используются единицы измерения CSS). |
| max-monochrome | Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. . |
| max-resolution | Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ). |
| max-width | Задает максимальную ширину области просмотра (используются единицы измерения CSS). |
| min-aspect-ratio | Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. |
| min-color | Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения . |
| min-color-index | Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
| min-device-aspect-ratio | Минимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| min-device-height | Определяет минимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| min-device-width | Определяет минимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
| min-height | Задает минимальную высоту области просмотра (используются единицы измерения CSS). |
| min-monochrome | Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа . |
| min-resolution | Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ). |
| min-width | Задает минимальную ширину области просмотра (используются единицы измерения CSS). |
| Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа . | |
| orientation | Определяет, находится ли область просмотра в режиме альбомной ориентации - экран шире, чем высота, или в портретной ориентации - высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation : landscape , а для портретной и orientation : portrait . |
| resolution | Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ). |
| scan | Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка - (interlace ), прогрессивная развертка (progressive ). |
| width | Задает ширину области просмотра (используются единицы измерения CSS). |
Мультимедийные функции (Media Queries Level 4)
media = "mediatype rel = "stylesheet" href = "stylesheet.css" >Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .
Подключение медиазапросов с использованием тега 2. Используя CSS правило @media внутри HTML тега
Обратите внимание, что при использовании атрибута media тега 2. Используя CSS правило @media внутри HTML тега
Кроме того, Вы можете использовать правило @import , которое позволяет копировать стили из других CSS файлов:
@import url ("main.css" ) (min-width :481px ) and (max-width :768px ); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */ @import url ("print.css" ) print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */ @import url ("protv.css" ) projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */ @import url ("file.css" ) screen and (orientation :landscape ); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google ), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import .
Медиазапросы, используемые в Bootstrap 4
В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4 . Bootstrap это HTML , CSS и Javascript фреймворк для создания адаптивных страниц.
Так как Bootstrap разработан, чтобы быть мобильным в первую очередь, разработчики фреймворка используют несколько медиазапросов для создания разумных точек останова для макетов и интерфейсов. Эти точки останова в основном основаны на минимальной ширине области просмотра и позволяют масштабировать элементы по мере изменения области просмотра.
Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4 :
// Small devices (landscape phones, минимальная ширина области просмотра 576px и выше) @media (min-width : 576px ) { ...код CSS } // Medium devices (tablets, минимальная ширина области просмотра 768px и выше) @media (min-width : 768px ) { ...код CSS } // Large devices (desktops, минимальная ширина области просмотра 992px и выше) @media (min-width : 992px ) { ...код CSS } // Extra large devices (large desktops, минимальная ширина области просмотра 1200px и выше) @media (min-width : 1200px ) { ...код CSS }Bootstrap в основном использует вышеуказанные диапазоны запросов для макета, системы сеток и компонентов, но иногда используют и медиазапросы, которые идут в другом направлении (заданный размер области просмотра или меньше).
Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4 :
// Extra small devices (portrait phones, максимальная ширина области просмотра 576px и ниже) @media (max-width : 575.98px ) { ...код CSS } // Small devices (landscape phones, максимальная ширина области просмотра 768px и ниже) @media (max-width : 767.98px ) { ...код CSS } // Medium devices (tablets, максимальная ширина области просмотра 992px и ниже) @media (max-width : 991.98px ) { ...код CSS } // Large devices (desktops, максимальная ширина области просмотра 1200px и ниже) @media (max-width : 1199.98px ) { ...код CSS }В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):
// Small devices (landscape phones, минимальная ширина области просмотра 576px и максимальная ширина области просмотра 768px) @media (min-width : 576px ) and (max-width : 767.98px ) { ...код CSS } // Medium devices (tablets, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 992px) @media (min-width : 768px ) and (max-width : 991.98px ) { ...код CSS } // Large devices (desktops, минимальная ширина области просмотра 992px и максимальная ширина области просмотра 1200px) @media (min-width : 992px ) and (max-width : 1199.98px ) { ...код CSS }Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and ("И"), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.
Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:
// Medium and Large devices (tablets and desktops, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 1200px) @media (min-width : 768px ) and (max-width : 1199.98px ) { ...код CSS }Настройка области просмотра
Обращаю Ваше внимание на то, что область просмотра определяет, как веб-страница отображается на мобильном устройстве, если она не задана, то ширина страницы считается равной стандартному значению, и она уменьшается на мобильном устройстве, чтобы поместиться на его экране.
Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:
name = "viewport" content = "width=device-width, initial-scale = 1" >- Атрибут name задает имя документа метаданным, значение "viewport" дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
- Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip ), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height .
- Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).
Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.
Доступные значения:
| Значение атрибута | Определение |
|---|---|
| width | Определяет ширину в пикселях области просмотра (значение - положительное целое число или device-width ). |
| height | Определяет высоту в пикселях области просмотра (значение - положительное целое число или device-height ). |
| initial-scale | Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение - положительное целое число от 0.0 до 10.0. |
| minimum-scale | Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale ). Значение - положительное целое число от 0.0 до 10.0. |
| maximum-scale | Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale ). Значение - положительное целое число от 0.0 до 10.0. |
| user-scalable | Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб). |
Версия CSS
CSS3Пример использования
Рассмотрим пример в котором установим определенные стили, которые браузер будет использовать при просмотре страниц, а другие при печати страниц (в нашем случае для экономии ресурса принтера - цвет всех элементов черный, а цвет заднего фона белый).
Для просмотра страниц пользователями мы установим следующие CSS стили:
h2 { color : brown ;} p { color : red ;} bodyСледующие CSS стили мы будем использовать при печати и предварительном просмотре страницы:
@media print { h2, p { color : #000 ;} body }Окончательный файл CSS будет выглядеть следующим образом:
h2 { color : brown ;} /* устанавливаем цвет элемента - коричневый */ p { color : red ;} /* устанавливаем цвет элемента - красный */ body { background-color : khaki ;} /* устанавливаем цвет заднего фона - хаки */ @media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ h2, p { color : #000 ;} /* групповой селектор устанавливает цвет элементов - черный */ body { background-color : #FFF ; } /* устанавливаем цвет заднего фона - белый */ }Обращаю Ваше внимание на важный момент! Если вы используете какое-то правило до того как установлены основные стили, то они не будут работать без использования значения !important , которое отменяет значимость последнего определенного стиля, т.е отменяет конфликты стилей и делает приоритетным тот стиль, который имеет значение !important .
Другими словами, если мы разместим правило @media print { } в начале таблицы стилей, то оно не будет работать без значения !important для конфликтующих стилей (а у него это все стили):
@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ h2, p { color : #000 !important ;} /* групповой селектор устанавливает цвет элементов - черный */ body { background-color : #FFF !important ; } /* устанавливаем цвет заднего фона - белый */ } h2 { color : brown ;} /* устанавливаем цвет элемента - коричневый */ p { color : red ;} /* устанавливаем цвет элемента - красный */ body { background-color : khaki ;} /* устанавливаем цвет заднего фона - хаки */Теперь свяжем наш файл CSS (css_pr_media.css ) с документом, используя элемент :
rel = "stylesheet" href = "../css_pr_media.css" >HTML разметка примера:
Рапаны
Рапаны (лат. Rapana) - род хищных брюхоногих моллюсков из семейства Muricidae. Распространены в морях Тихого и Индийского океанов. С 1947 года встречается в Черном море. Длина раковины до 12-15 см. Раковина широкоовальной формы, завиток низкий, последний оборот вздут, серовато-коричневого цвета со спиральными рёбрами и осевыми утолщениями. Активные хищники, питающиеся двустворчатыми мелкими моллюсками, например, мидиями и устрицами, раковины которых они открывают при помощи своей сильной мускульной ноги. Молодые рапаны с помощью своего покрытого зубчиками языка-сверла делают отверстия в раковинах своих жертв и раскрывают их. Обитают на любых типах дна, передвигаясь с помощью мускулистой ноги.
Ниже показано как этот пример отображается в браузере, а на изображении как страница отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати).
Приветствую вас на своем блоге. Сегодня я хотел бы вам показать, как пишутся в css медиа-запросы и для чего они вообще нужны при создании шаблона.
Немного теории
Итак, для чего они вообще нужны, эти медиа-запросы? Они позволяют изменить стили каким-то элементам при условии изменения ширины окна. Это как с псевдоклассом hover – он применяет стили к элементу, на который наведен курсор. То есть событие – наведение курсора. Медиа-запросы делают то же самое, только для них событие – изменение ширины экрана. Все, я думаю вам понятно.
Как они пишутся
Медиа-запросы записываются в таблице стилей, обычно в самом конце файла, когда все остальные стили уже описаны. Синтаксис запроса выглядит так:
@media screen and(max-width: 1000px){ Стили… }
Давайте разберемся подробнее:
@media – собственно, эта приставка в начале и указывает на то, что мы пишем медиа-запрос.
Screen – тип носителя. Тут мы указываем screen, потому что это означает экран монитора (или мобильного устройства). Поскольку мы адаптируем сайт под эти устройства, то нам достаточно указать этот тип, но есть и другие.
And – ключевое логическое слово И. Означает, что после этого идет какое-то условие.
(max-width: 1000px) – само условие. Если ширина окна будет меньше 1000 пикселей, то условие срабатывает и к странице применяются те стили, что будут описаны далее.
Смотрим на примере
Отлично разобраться с медиа-запросами поможет пример. Я создам страницу, которая будет похожа на какую-то статью, и мы ее адаптируем под мобильные устройства. Итак, разметка:
Статья
Текст статьи
Тут мы создали общий контейнер для нашей статьи, вставили в нее картинку, заголовок, а само содержание будет в абзацах. Картинку можно взять любую (я взял достаточно большую). Теперь я применю некоторые стили:
Контейнеру задаем максимальную ширину и центрируем его. Теперь при уменьшении окна не будет сразу же появляться горизонтальный скролл, ведь мы записали максимальную ширину, а не фиксированную.
Картинку уводим влево, а текст будет обтекать ее справа с небольшим отступом. Вот так это у меня выглядит:
Я просто добавил много случайного текста в абзацы, чтобы все было больше похоже на реальную статью. Это внешний вид статьи при ширине примерно 800 пикселей. Сейчас все смотрится вполне неплохо, но давайте мы еще уменьшим ширину окна, до 700 пикселей, например:
Вроде бы и неплохо и горизонтальный скролл не появляется, но текстовое содержимое рядом с картинкой стало слишком узким. Слишкое узкие строчки это тоже плохо. И тут нам на помощь придет медиа-запрос.
Важное условие работы! Перед тем, как начинать реализовывать адаптивность, нужно в html в тег head вставить вот такую строчку кода:
Все, теперь все будет работать.
Так, теперь нужно разобраться с тем, как убрать проблему. Собственно, достаточно будет отменить обтекание на ширине от 700 пикселей и меньше и тогда при достижении этой ширины текст сам перенесется под изображение. Также неплохо было бы преобразовать картинку в блок и выровнять ее по центру. Все это делается таким кодом:
@media screen and (max-width: 700px){ img{ float: none; margin: 0 auto; display: block; } }
Вот и все, теперь вот так вот красиво выглядит наша статья на расширении 700 пикселей.
Еще один адаптивный запрос
Но теперь возникает еще одна проблема – при большем уменьшении окна наступит то время, когда картинка просто перестанет влазить в окно и начнет образовываться горизонтальный скролл, что не есть хорошо.
Примерно это начинает происходить на пятистах пикселях, поэтому давайте добавим на этой отметке еще один запрос:
@media screen and (max-width: 500px){ img{ width: 80%; } }
Ширина указывалась мной исходя из того, что изображение имеет небольшие отступы, поэтому задание 100-процентной ширины привело бы к появлению скролла.
Готово. Теперь у нас, по сути, адаптивная страница. Пусть она примитивная, но зато адаптивная.
Откройте ее в браузере и уменьшайте ширину окна. Сначала вы увидите, как отменится обтекание, а потом картинка начнет пропорционально уменьшаться в размерах. И всегда будет так, что содержимое будет полностью влезать в окно. Вот она, сила адаптивности!
Конечно, в этой статье я привел вам самые простые примеры, но они очень важны для понимания того, как это вообще работает. На этом у меня все, в будущем постараюсь написать еще пару статей на эту тему.
Загрузка...
