В наши дни люди используют различные размеры экрана для просмотра веб-сайтов. Мне нужно выяснить, как настроить динамическую ширину веб-сайта, которая может автоматически изменяться в зависимости от размера экрана. Я создал сайт шириной 1200 пикселей. Веб-сайт и контент слишком велики для экрана моего ноутбука. Но он больше подходит к другому моему монитору из-за его большого размера. Могу ли я настроить эту ширину для динамического изменения в зависимости от размера монитора пользователя?
Динамическая ширина веб-сайта
Ответы (1)
Для этого можно использовать медиа-запросы CSS. (примечание: старые версии браузеров не поддерживаются)
Media Queries — это модуль CSS3, позволяющий адаптировать рендеринг контента к таким условиям, как разрешение экрана (например, экран смартфона или экран компьютера).
В частности, он рассмотрит следующее:
высота и ширина устройства высота и ширина браузера
ориентация разрешения экрана устройства (для мобильных телефонов и
таблетки; портрет или пейзаж)
CSS2 позволяет указать таблицу стилей для определенного типа носителя, такого как экран или печать. Теперь CSS3 делает его еще более эффективным, добавляя медиа-запросы.
Вы можете добавлять выражения к типу мультимедиа, чтобы проверять определенные условия и применять различные таблицы стилей. Например, у вас может быть одна таблица стилей для больших дисплеев и другая таблица стилей специально для мобильных устройств.
Он достаточно мощный, поскольку позволяет адаптировать его к разным разрешениям и устройствам без изменения содержимого.
Пример:
Следующий CSS будет применяться, если область просмотра меньше 600 пикселей.
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
Если вы хотите создать ссылку на отдельную таблицу стилей, поместите следующую строку кода между тегом <head>
.
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Несколько мультимедийных запросов:
Вы можете комбинировать несколько медиа-запросов. Следующий код будет применяться, если область просмотра составляет от 600 до 900 пикселей.
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Ширина устройства:
Следующий код будет применяться, если максимальная ширина устройства составляет 480 пикселей (например, дисплей iPhone). Примечание: max-device-width означает фактическое разрешение устройства, а max-width означает разрешение области просмотра.
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
Кроме того, это хорошая статья, посвященная таблицам стилей для конкретных разрешений в CSS трюках