Можно ли в медиазапросах указывать диапазон значений от 375 до 768 пикселей

Обновлено: 02.07.2024

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

Размеры экрана:

640 x 480
800 x 600
1024 x 768
1280 x 1024 (и больше)

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

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

Запросы @Titanium Media не являются статическими. Изменение размера вашего браузера изменит стиль элементов в зависимости от того, каким условиям теперь удовлетворяет браузер.

@JaPerk14, не могли бы вы уточнить, что не работает? Вы понимаете, что устройство шириной 640 пикселей загрузит все 4 таблицы стилей, верно? (Поскольку все эти выражения верны: 640

Хорошо, я постараюсь быть более конкретным. Скажем, например, что ширина браузера составляет 640, тогда стили медиа-запросов размером 800, 1024 и 1280 не должны применяться. Я думаю, ты решил мою проблему, Симманон. Вы можете изменить мои новые медиа-запросы, чтобы они работали правильно и меняли стили, когда ширина браузера изменяется на определенную ширину.

Это противоположность "отзывчивого" дизайна, и вы увеличиваете свои усилия в 4 раза, поскольку вам нужно будет поддерживать четыре дизайна. У вас должен быть один «гибкий» дизайн для всего контента, а затем использовать медиа-запросы только для решения конкретных проблем. Например, если для боковой панели недостаточно места, это не проблема конкретного устройства, это просто означает, что вы не хотите, чтобы ваш контент сжимался до определенного предела, и этот предел не должен диктоваться устройством, а должно определяться содержанием. По умолчанию HTML не зависит от устройства — вы идете в направлении, зависящем от устройства.

3 ответа 3

Поместите все это в один документ и используйте это:

Если у вас больше таблиц стилей, вы перепутали точки останова:

Редактировать обновленный вопрос:

Медиа-запросы не похожи на операторы catch или if/else. Если какое-либо из условий соответствует, то будут применены все стили из каждого медиа-запроса, которому он соответствует. Если вы укажете только минимальную ширину для всех ваших медиа-запросов, возможно, что некоторые или все медиа-запросы совпадут. В вашем случае устройство шириной 640 пикселей соответствует всем 4 вашим медиа-запросам, поэтому загружаются все таблицы стилей. То, что вы, скорее всего, ищете, это:

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

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

Спасибо, DigitalOcean!

CSS-Tricks присоединяется к сообществу DigitalOcean! Мы так рады объединить усилия. Узнайте больше об этом изменении здесь. В качестве специального приветственного предложения получите бесплатный кредит в размере 100 долларов США, чтобы попробовать DigitalOcean у нас.

Если ты думаешь, что реагировать просто, мне жаль тебя, сынок. У нас 99 окон просмотра, а у iPhone всего одно.
— Джош Брюэр, 10 марта 2010 г.

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

Если вам нужен полный список медиа-запросов, вам подойдет этот репозиторий.

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

Телефоны и портативные устройства

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

Планшеты Galaxy Планшеты Nexus Kindle Fire

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

Я не совсем вижу это в вашем источнике.
Ответить ↓

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

Bulma (интерфейсный фреймворк) использует 768 пикселей в качестве максимальной ширины для мобильных устройств и 769 пикселей в качестве минимальной ширины для планшетов. Это правильно? Я не вижу, чтобы это использовалось ГДЕ-НИБУДЬ БОЛЬШЕ. В других местах это точка останова от 767 до 768 пикселей между мобильным телефоном и планшетом. Я что-то пропустил? Или Bulma пропустил заметку об этом?

Просто прочитайте ваш пост об использовании CSS для альтернативных стилей веб-сайтов в зависимости от разрешения экрана. Отличный пост.

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

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

Если размер экрана соответствует мобильному устройству, я хочу, чтобы текст обтекал экран на 100 % (в альбомном или не альбомном формате) с максимальной шириной 350 пикселей (в случае чего-то вроде ландшафтного режима iPad).

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

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

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

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

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

Это именно то, что вы ищете.

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

screen and (min-device-width: 1008px) — HTC Desire игнорирует
экран и (min-device-width: 1009px) — HTC Desire использует эту таблицу стилей

Разрешение Desire — 480 × 800, так что я не понимаю, что здесь происходит!

использовали ли вы ширину устройства, начальный масштаб = 1 в своих метаданных? мобильные устройства иногда масштабируют свои просмотры…

Это потрясающе. спасибо.

Этот фрагмент медиа-запроса просто великолепен, хорошо организован и очень понятен. Большое спасибо

Nexus S сообщает о 533 пикселях в ландшафтном режиме. поэтому ни один из приведенных выше фрагментов не будет работать, если телефон находится в ландшафтном режиме, когда вы переходите на свой сайт. мой iPod, с другой стороны, всегда сообщает 320 пикселей в портретной ориентации, а также в ландшафтном режиме. То же самое для iPhone 4. Он всегда сообщает 320 пикселей.

Подходит ли этот набор медиа-запросов для подхода «мобильное и вверх»?

В моем тестировании "min-width: 321px", кажется, перекрывает большинство других. Это необходимо/полезно? Я заметил, что вы (Крис) не используете его в своем коде для этого сайта. Похоже, вы используете только:

Вы правы, но я не уверен, какое здесь решение. Крис?

Если вы используете min-width:321px , затем max-width:500px , свойство min width переопределяет его, поскольку оно применяет все стили выше 321px .

используется этот формат или нет…?

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

Хорошая статья. Спасибо

Привет, ребята.
У меня проблема

Что касается медиа-запросов, работающих в браузере Android. Я использую Dreamweaver CS5.5. Когда я тестировал, изменений не было.
При тестировании в альбомной ориентации используется ширина экрана веб-браузера по умолчанию, а не ширина экрана устройства.

Та же проблема. Браузер Android использует таблицу стилей по умолчанию вместо таблицы стилей для мобильных устройств. Тестирование на Nexus S.

Кажется, я разобрался. Когда я использую «(max-device-width: 800px)», все работает. Я предполагаю, что @media видит, что мой Nexus имеет размер 480 x 800, и принимает за ширину большее число.

Когда я использую это, чтобы запросить таблицу стилей для дисплеев Retina:

Я не могу заставить W3 Validator проверить это.Ошибка: Неверное значение только для экрана и (-webkit-min-device-pixel-ratio: 2) для атрибута мультимедиа в ссылке на элемент: Ожидалась буква в начале части мультимедийной функции, но вместо этого увидел.

Есть ли способ использовать значение "-webkit-min-device-pixel-ratio", упомянутое в этом сообщении, таким образом, чтобы оно было "действительным"?

Майк:
Я бы добавил ваш файл mobile-retina.css в ваш основной файл CSS?
Пример:

Никто больше не проверяет HTML, так как существует так много развивающихся стандартов. Если ваш сайт работает, то какая вам разница?

Нет. любое «расширение» css, относящееся к конкретному движку рендеринга, не проверяется. Все, что начинается с -moz для Mozilla или, например, -webkit... пока оно работает... технически недопустимо.

Пожалуйста, эта тема устарела? Есть более актуальное руководство по стандартным медиа-запросам??

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

(ориентация: книжная) не подходит для CSS3…. Вы игнорируете это? Или у вас есть обходной путь?

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

Итак, небольшой вопрос. ЕСЛИ я посещаю страницу, которая использует медиа-запросы, загружает ли браузер все таблицы стилей или только ту, которая была выбрана? В моем случае всегда должен загружаться файл styles.css, а затем будут загружаться другие запрашиваемые таблицы стилей мультимедиа в зависимости от того, верны они или нет.

Ваши вопросы не имеют стопроцентно определенного ответа, однако я исследовал это на прошлой неделе и пришел к одному прямому способу объяснить это. Если вы используете display:none, у вас больше шансов, что этот элемент не будет отображаться браузером. В то время как если вы используете visible:hidden, настраиваемый вами элемент будет предварительно загружен вашим браузером. По сути, все зависит от того, как происходит изменение в вашей таблице стилей, чтобы сделать объект скрытым или отображаемым, и, конечно, от того, с какого браузера/платформы/устройства пользователь получает доступ.

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

Лучше всего использовать глобальную таблицу стилей, а затем назначать каждую настройку точки останова в собственном файле css, таким образом, ТОЛЬКО этот файл и его ресурсы будут выбраны.

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

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

Можно ли настроить таргетинг на iphone4+ с помощью отдельного медиа-запроса, чем на другие смартфоны с таким же минимальным/ширинным размером

Однако это также убивает мой стиль iphone4+, где я *действительно* хочу, чтобы нижний колонтитул отображался. Проблема в том, что минимальные/максимальные размеры iphone4+ и обычного *смартфона* нацелены на одни и те же размеры 320 и 480 соответственно, и я не могу заставить отдельные устройства с одинаковыми соотношениями ширины/высоты работать по-разному, не переопределяя друг друга. Мы будем очень признательны за любые онлайн-статьи, в которых говорится об этом!

Вы пытались проверить наличие дисплея Retina (-webkit-min-device-pixel-ratio)?

«Джереми Мэнсфилд: возлюбленный Иисуса…»

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

Вы не можете настроить таргетинг на определенные устройства с помощью CSS... вот где адаптивный дизайн вступает в игру, смешивая вместе javascript (или jquery) и css для таргетинга на определенные устройства, установки точек останова и всего, что CSS не может сделать, а затем примените стили, связанные с адаптивным таргетингом.

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

Позволяет ли трюк, который «немец» написал «Майку», настроить таргетинг на iPhone4? iPhone4 и iPhone4S с дисплеем Retina?

@media только экран и (-webkit-min-device-pixel-ratio: 2) /* вот стили из mobile-retina.css */
>

Это должно работать правильно? Просто поместите это в свой основной файл CSS, где вы скроете нижний колонтитул, но затем добавьте туда стиль, чтобы отобразить его…

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

Я сделал свой сайт таким, что он загружает разные фоновые изображения в зависимости от типа устройства. Я не хочу загружать фон размером 150–200 КБ на свой телефон, если у меня его нет.

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

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

Затем вызовите navigator.vendor, чтобы определить устройство

Вы должны увидеть в ответе примерно следующее:
Mozilla/5.0 (iPhone; U; процессор iPhone OS 3_0, например Mac OS X; en-us) AppleWebKit/528.18 (KHTML, например Gecko) Version/4.0 Мобильный/7A341 Safari/528.16

У меня та же проблема, что и у Маркса. В настоящее время я использую Bootstrap, и кажется, что изменения макета должны быть сделаны, когда страница в ipad вертикальна, но макет не изменится, если я не изменю медиа-запросы с 768 пикселей на 769 пикселей. Я уверен, что это не так, как это должно быть сделано…

Это в моем header.php

Вы, сэр, гений. Работает как шарм! iphone4+ теперь показывает другой css, и теперь я могу сделать минимальную ширину моего настольного браузера 800 пикселей, а не минимальную ширину 1136 пикселей (iphone4+)

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

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

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

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

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

Это глупый подход.

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

Компания Mashable назвала 2013 год годом адаптивного веб-дизайна. Почему? Более 30% их трафика приходится на мобильные устройства. Они прогнозируют, что к концу года это число может достичь 50%. В целом в Интернете 17,4 % веб-трафика приходилось на смартфоны в 2013 году. В то же время на использование Internet Explorer, например, приходится лишь 12 % всего браузерного трафика, т. е. примерно на 4 %. с этого времени в прошлом году (по данным W3Schools). Если вы оптимизируете для конкретного браузера, а не для глобальной популяции смартфонов, вы упускаете из виду лес за деревьями. А в некоторых случаях это может означать разницу между успехом и неудачей — адаптивный дизайн влияет на показатели конверсии, поисковую оптимизацию, показатель отказов и многое другое.

Подход адаптивного веб-дизайна

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

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

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

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

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

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

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

В приведенном ниже примере адаптивного CSS показана процедура запуска определенного файла CSS с учетом ширины страницы. Например, если максимальное разрешение экрана текущего устройства – 480 пикселей, будут применены стили, определенные в файле main_1.css.

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

«Умный зум»

В мобильных браузерах используется так называемое "умное масштабирование", чтобы предоставить пользователям "превосходный" опыт чтения. По сути, интеллектуальное масштабирование используется для пропорционального уменьшения размера страницы. Это может проявляться двумя способами: (1) масштабирование по инициативе пользователя (например, двойное касание экрана iPhone для увеличения текущего веб-сайта) и (2) первоначальное отображение увеличенной версии веб-страницы на загрузить.

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

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

Кроме того, мы можем полностью отключить масштабирование с помощью user-scalable=false .

Ширина страницы

Предположим, вы хотите предоставить три разных адаптивных макета страницы: один для компьютеров, один для планшетов (или ноутбуков) и один для смартфонов. Какие размеры страницы следует использовать в качестве предельных значений (например, 480 пикселей)?

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

Однако существует несколько различных определений ширины. Например, 320 и выше имеют пять приращений CSS3 Media Query по умолчанию: 480, 600, 768, 992 и 1382 пикселей. Наряду с данным примером в этом руководстве по адаптивной веб-разработке я мог бы перечислить как минимум десять других подходов.

С любым из этих разумных наборов приращений вы можете настроить таргетинг на большинство устройств. На практике обычно нет необходимости отдельно обрабатывать все вышеупомянутые примеры ширины страницы — семь разных разрешений, вероятно, будут излишними. По моему опыту, чаще всего используются 320 пикселей, 768 пикселей и 1200 пикселей; этих трех значений должно быть достаточно для таргетинга на смартфоны, планшеты/ноутбуки и настольные компьютеры соответственно.

Псевдоэлементы

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

Начнем с того, что скрытие некоторых элементов ( display: none; ) может быть отличным решением, когда речь идет об уменьшении количества элементов на экране для макета смартфона, где почти всегда не хватает места.

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

Псевдоэлементы используются для применения определенных стилей к определенным частям элемента HTML или для выбора определенного подмножества элементов. Например, псевдоэлемент :first-line позволяет вам определять стили исключительно для первой строки определенного селектора (например, p:first-line будет применяться к первой строке всех p ). Точно так же псевдоэлемент a:visited позволит вам определить стили для всех элементов со ссылками, ранее посещенными пользователем. Очевидно, что они могут пригодиться.

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

Используя только псевдоэлементы :before и :after, мы достигаем следующего:

Дополнительную информацию о магии псевдоэлементов можно найти в хорошей статье Криса Койера CSS-Tricks.

Итак, с чего мне начать?

В этом руководстве мы определили некоторые строительные блоки адаптивного веб-дизайна (например, медиа-запросы и псевдоэлементы) и представили несколько примеров каждого из них. Куда мы идем дальше?

Первый шаг, который вы должны сделать, – организовать все элементы вашей веб-страницы в соответствии с размерами экрана.

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

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

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

Для смартфона как никогда важно группировать конкретное содержимое и иерархически определять важность отдельных частей.

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

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

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

Другие элементы адаптивного дизайна

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

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

Несколько слов о системах Fluid Grid

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

Хотя эти системы с плавающей сеткой тесно связаны с тем, что мы здесь обсуждали, на самом деле они представляют собой совершенно отдельный объект, для подробного обсуждения которого потребуется дополнительное руководство.Поэтому я упомяну лишь некоторые основные фреймворки, поддерживающие такое поведение: Bootstrap, Unsemantic и Brackets.

Заключение

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

Каждое воскресенье черпайте вдохновение, необходимое для эффективной работы!

< бр />

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

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

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

Начнем!

Что такое точка останова CSS?

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

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

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

Как установить контрольные точки CSS

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

Итак, какой подход вы должны использовать для своих точек останова?

Есть два возможных подхода:

Точки останова в зависимости от устройства
Точки останова на основе содержания

Точки останова CSS в зависимости от устройства

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

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

При таком подходе вы получите огромный список медиазапросов.

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

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

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

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

Когда использовать контрольные точки CSS минимальной или максимальной ширины

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

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

Установите стили по умолчанию для небольших устройств и просто настройте их соответствующим образом для больших устройств.

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

Использование точек останова CSS с SASS

Если вы используете препроцессор, такой как SASS или SCSS, вы можете создавать гораздо более интеллектуальные точки останова. Mixin позволяет вам создавать больше декларативных точек останова для запоминания, например:

Работая в группе, гораздо легче запомнить "планшет вверх", чем 768px или 48em. Любой может понять эту точку останова; это для планшетов и экранов большего размера.

Какие точки останова CSS использовать

Мы увидели, как использовать точки останова и когда их использовать, но остается вопрос: какие конкретно точки останова следует использовать?

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

Bootstrap имеет контрольные точки на 576, 768, 992 и 1200 пикселей. Foundation в основном имеет точки останова на 40em и 64em. В Bulma контрольные точки устанавливаются на 768 пикселей, 769 пикселей, 1024 пикселей, 1216 пикселей и 1408 пикселей.

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

Вы поняли!

Подведение итогов

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

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

Какие контрольные точки CSS вы используете для своих макетов? Дайте нам знать в разделе комментариев ниже.

Что дальше?

Создавайте и тестируйте собственные блоки Гутенберга с помощью Local бесплатно!

Узнайте больше о Local здесь!

Для получения дополнительных советов по созданию адаптивных сайтов ознакомьтесь с этими статьями!

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