Медиа-запросы позволяют настроить представление ваших веб-страниц для определенного диапазона устройств, таких как мобильные телефоны, планшеты, настольные компьютеры и т. д., без каких-либо изменений в разметке. Медиа-запрос состоит из типа медиа и диапазона значений для определения ширины устройства или разрешений экрана к которому будут применены меда-свойства.
Поскольку медиа-запрос является логическим выражением, он отдает значения true
или false
. Результат запроса будет истинным, если тип медиа, указанный в медиа-запросе, соответствует типу устройства, на котором отображается документ, а также удовлетворены все выражения в медиа-запросе. Когда медиа-запрос имеет значение true
, связанные таблицы стилей или правила стилей применяются к целевому устройству.
Вот простые примеры медиазапросов для стандартных устройств.
/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
/* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
/* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
/* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
/* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
/* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
/* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
/* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
/* styles */
}
Медиа-запросы являются отличным способом создания адаптивных макетов. Используя медиа-запросы, вы можете по-разному настраивать свой веб-сайт для пользователей, просматривающих со смартфона, планшета или компьютера без изменения фактического содержимого страницы.
Изменение ширины столбцов в зависимости от размера экрана
Вы можете использовать медиазапрос для изменения ширины веб-страницы и связанных с ней элементов, чтобы обеспечить лучший вид для просмотра с разных устройств.
Следующие правила автоматически изменят ширину элемента .container
в зависимости от размера экрана или области просмотра. Например, если ширина области просмотра меньше 768 пикселей, .container
покроет 100% ширины области просмотра, если же больше, чем 768 пикселей, но меньше, чем 1024 пикселей, .container
будет иметь ширину 750 пикселей и т. д.
.container {
margin: 0 auto;
background: #f2f2f2;
box-sizing: border-box;
}
/* Mobile phones (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
.container {
width: 100%;
padding: 0 10px;
}
}
/* Tablets and iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
.container {
width: 750px;
padding: 0 10px;
}
}
/* Low resolution desktops and laptops ---------- */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
padding: 0 15px;
}
}
/* High resolution desktops and laptops ---------- */
@media screen and (min-width: 1280px) {
.container {
width: 1200px;
padding: 0 20px;
}
}
Вы можете использовать CSS3-свойство box-sizing
для элементов, чтобы создавать более интуитивные и гибкие макеты с гораздо меньшими усилиями.
Изменение макетов в зависимости от размера экрана
Вы также можете использовать CSS-медиазапрос, чтобы сделать ваш многоколоночный макет веб-сайта более адаптивным для устройств за счет небольшой настройки.
Следующее правило создаст макет из двух столбцов, если размер области просмотра больше или равен 768 пикселям, но если он меньше, каждый элемент .column
будет иметь 100% ширины, т.е. они будут расположены один под другим.
.column {
width: 48%;
padding: 0 15px;
box-sizing: border-box;
background: #93dcff;
float: left;
}
.container .column:first-child{
margin-right: 4%;
}
@media screen and (max-width: 767px){
.column {
width: 100%;
padding: 5px 20px;
float: none;
}
.container .column:first-child{
margin-right: 0;
margin-bottom: 20px;
}
}