В этом посте будут упомянуты рекомендации, необходимые для реализации медиа-запросов.
Как реализовать медиа-запросы для мобильных устройств?
Медиа-запрос можно применить к мобильным устройствам, просто упомянув « @СМИ » и указав в маленьких фигурных скобках размер экрана. Затем CSS для этого медиа-запроса можно добавить внутри фигурных скобок. Всякий раз, когда размер экрана соответствует размеру, указанному пользователем, он будет применять указанный медиа-запрос.
Давайте рассмотрим практический пример, чтобы изучить реализацию медиа-запросов для мобильных устройств.
Пример. Создание макета, который меняется с макета с двумя столбцами на макет с одним столбцом путем применения медиа-запросов.
В приведенном ниже примере макет веб-страницы изменится с макета столбца на макет с одним столбцом:
Шаг 1. Создайте структуру HTML
- Сначала создайте файл HTML и свяжите с ним внешний файл таблицы стилей CSS. <голова> раздел.
- Затем создайте <заголовок> раздел и добавьте заголовок сайта, используя ярлык.
- Создать <дел> по имени класса «container-class» и еще два внутри него имеют имя класса « столбец ». < тело >
<заголовок>
< ч1 > Linux-подсказка < / ч1 >
< / заголовок>
< делитель сорт '=' 'контейнер-класс' >
< делитель сорт '=' 'столбец' >
< ч2 > Раздел первый < / ч2 >
< п > Linux Hint — одна из лучших платформ электронного обучения. < / п >
< / делитель >
< делитель сорт '=' 'столбец' >
< ч2 > Раздел второй < / ч2 >
< п > Linux Hint — одна из лучших платформ электронного обучения. < / п >
< / делитель >
< / делитель >
< / тело >Шаг 2. Примените CSS
По кузовной части:- Сначала укажите раздел тела, написав « тело » и упоминание фигурных скобок.
- Внутри фигурных скобок укажите семейство шрифтов, цвет фона, поля и отступы.
На <заголовок> раздел:
- Укажите цвет текста, выравнивание текста, цвет фона и отступы.
На «контейнер-класс» div:
- Установить ' отображать ” стоимость недвижимости до “ гибкий », чтобы создать Flexbox.
- Использовать ' оправдание-содержание », чтобы добавить пространство между содержимым и добавить отступы.
По классу столбца:
- Сначала укажите указанное значение в поле « гибкий », чтобы добавить пространство между двумя разделами макета.
- После этого добавьте цвет фона, границу, отступы и размер поля.
Шаг 3. Примените медиа-запрос
- Чтобы применить медиа-запрос для мобильных устройств, сначала добавьте « @СМИ ' ярлык.
- Затем укажите значение « 768 пикселей », что характерно для мобильных устройств, до « Максимальная ширина ” в маленьких фигурных скобках.
- После этого укажите « столбец ” значение для “ гибкое направление ” свойство, которое будет применяться к “ класс контейнера». Это преобразует два столбца в один каждый раз, когда будет обнаружен указанный размер экрана.
- Наконец, примените CSS к « столбец ” класс и укажите “ допуск ' и ' гибкий ' ценности:
семейство шрифтов: без засечек;
фон- цвет : серебро;
допуск: 0 ;
дополнение: 0 ;
}
заголовок {
фон- цвет : #2f4f4f;
отступ: 20 пикселей;
текст- выровнять : центр;
цвет : белый;
}
.контейнер- сорт {
дисплей: гибкий;
оправдывать- содержание : пространство-между;
отступ: 20 пикселей;
}
.столбец {
гибкий: 0 1 расчет ( пятьдесят % - 10 пикселей ) ;
граница : 1 пиксель сплошного зеленого цвета;
фон- цвет : белый;
размер коробки: граница-коробка;
отступ: 20 пикселей;
}
@ СМИ ( Макс- ширина : 768 пикселей ) {
.контейнер- сорт {
гибкое направление: столбец;
}
.столбец {
гибкий: 0 1 100 %;
поле внизу: 20 пикселей;
}
}Выход
Вот результат веб-страницы после применения медиа-запроса. Этот вывод представляет собой адаптивный макет с двумя столбцами:
Всякий раз, когда экран соответствует указанным размерам с помощью медиа-запроса для мобильных устройств, он превращается в макет с одной колонкой:
Заключение
Чтобы реализовать медиа-запросы для мобильных устройств, сначала включите « область просмотра ' в ' голова ' раздел. Затем напишите CSS для мобильного дизайна. После этого добавьте медиа-запрос, используя тег «@media» и указав размер экрана мобильного устройства. Например, укажите 768 пикселей для планшетов и 480 пикселей для мобильных телефонов. В этой статье объясняется процедура реализации медиа-запросов для мобильных устройств.