Разделение медиа запросов
При появлении медиа запросов разработчики начали использовать их при разработке адаптивных дизайнов для веб проектов. Обычное решение представляет собой различные наборы, которые изменяются для разных размеров рабочей области. Но можно использовать разделение стилей, вместо перезаписи.
Обычный вариант:
.box { background: #777; width: 100%; box-shadow: inset 0 1px 3px #333; } @media (min-width: 800px) { .box{ width: 760px; margin: 20px auto; box-shadow: none; /* reset */ } }
И вариант тех же стилей с разделением:
.box { background: #777; } @media (max-width: 799px) { .box { width: 100%; box-shadow: inset 0 1px 3px #333; } } @media (min-width: 800px) { .box{ width: 760px; margin: 20px auto; } }
Идея заключается в определении блока CSS со свойствами по умолчанию, общими для всех вариантов, а все остальные свойства разделить на различные медиа запросы. Например, для максимальной ширины 799px и для минимальной ширины 800px.
Конечно, получается 3 блока CSS вместо двух. Но такую структуру кода гораздо легче сопровождать и модифицировать. Добавление, удаление и замена свойств CSS не приводит к непредвиденным результатам. А в некоторых случаях такая структура приводит к сокращению размера кода, так как не нужно изменять некоторые свойства, которые не используются для конкретного медиа запроса.
Можно начинать разработку кода с версии без разделения. Это может быть вариант для десктопа или мобильного устройства. Например, для десктопа выше приведенный пример будет иметь вид:
.box { background: #777; width: 760px; margin: 20px auto; }
Затем, можно начинать разделять код просто перемещая свойства, которые различаются для каждого медиа запроса.
После чего, нужно провести "чистку" или "преобразование" кода -> проверить наличие свойств, которые являются одинаковыми для всех медиа запросов и выделить их в отдельный общий блок.
Недостаток: такая техника плохо работает для браузеров, которые не поддерживают медиа запросы. Для таких случаев можно использовать минимальный набор свойств в общем блоке (как резерв).
Также не нет необходимости разделение медиа запросов для каждого селектора, а только для тех, разница в которых для версий десктопа и мобильных устройств существенна. Если же вам нравится все разделять, то можно создать несколько разных файлов и использовать медиа запросы в для <link> , так что не нужно будет загружать неиспользуемые стили.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/CVMrTpMIyiQ/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.