Media screen media only screen and: What is the difference between “screen” and “only screen” in media queries?

Leave a Comment / Разное / By /

Про retina и @media: как решить вопрос кроссбраузерной вёрстки

Retina — это зарегистрированный компанией Apple товарный знак. Под эти знаком выпускаются дисплеи (включая дисплеи мобильных устройств) с очень высоким разрешением экрана и маленьким размером пикселей. Сейчас это название «приклеилось» просто ко всем таким дисплеям.

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

Логические пиксели, это как раз те пиксели, которые фигурируют в разметке, и они не обязаны совпадать с физическими, которые их будут отображать. На классических Retina-дисплеях каждому логическому пикселю соответствует квадрат 2×2 физических пикселей.

Таким образом, данный блок:

.some-block {
  width: 100px;
  height: 100px;
}

на обычных дисплеях будет иметь размер 100×100 физических пикселей, а на экранах Retina — 200×200 пикселей.

А вот теперь начинаются проблемы

Особенно, если это не просто блок, а картинка, и причём растровая:

.some-image {
  background: url(http://via.placeholder.com/100x100) 100px 100px;
  width: 100px;
  height: 100px;
}

Данная картинка будет иметь размер 100×100 физических пикселей на обычных дисплеях, и целых 200×200 физических пикселей при разрешении всего 100×100. Такие изображения будут «размытыми». Предположим, что мы поставили разрешение 200×200:

.some-image {
  background: url(http://via.placeholder.com/200x200) 100px 100px;
  width: 100px;
  height: 100px;
}

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

Выход есть — @media-запросы!

.some-image {
  background: url(http://via.placeholder.com/100x100) 100px 100px;
  width: 100px;
  height: 100px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .
  some-image {
    background: url(http://via.placeholder.com/200x200) 100px 100px;
  }
}

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

Что ещё?

Существуют также устройства с промежуточным количеством пикселей на один логический. Более того, этому помогают опции масштабирования как в самом браузере, так и операционной системе. Поэтому правильный работающий @media-query выглядит немного иначе:

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {

или даже так

@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {

Заключение

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

Например, с less всё будет выглядеть таким образом:

@retina: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)";
.some-image {
  background: url(http://via.placeholder.com/100x100) 100px 100px;
  width: 100px;
  height: 100px;
  @media @retina {
    background: url(http://via.placeholder.com/200x200) 100px 100px;
  }
}

Есть вопрос? Напишите в комментариях!

Адаптивная верстка: media queries — AlexdevAlexdev

Добрый день, уважаемые читатели!

Сегодня я бы хотел продолжить обсуждение адаптивной верстки.

В прошлой статье мы обсудили, как сделать простенький адаптивный дизайн. После создания мы выявили 1 большой минус:

На небольших экранах изображения будут слишком мелкими.

 

Как решить проблему? Media Queries!

Данную проблему можно решить благодаря новой возможности CSS: media queries.

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

Рассмотрим пример:

@media screen and (max-width: 960px) {
    .class {
        background: red;
    }
}

В результате, если у пользователя экран меньше или равен 960 пикселей, то задний фон для класса .class будет красным.

Таким образом мы может подстраивать наши стили под каждый экран в отдельности.

 

Условия для Media Queries

Условия можно задать следующие условия:

@media screen and (max-width: XXXpx) { }
@media screen and (min-width: XXXpx) { }
@media screen and (min-width: XXXpx) and (max-width: YYYpx) { }
@media screen and (max-device-width: XXXpx) { }

Лично я чаще всего использую первое условие.

 

Способы подключения CSS-таблиц

Так же можно добавлять условия, для каких экранов будет подключаться та или иная таблица стилей:

<link rel="stylesheet" media="screen and (max-width: 960px)" href="big.css" />
<link rel="stylesheet" media="screen and (min-width: 480px)" href="small. css" />

<!-- для iPhone 4 -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

<!-- для iPad portrait and landscape -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

 

 Практика

Давайте доработаем пример из прошлой статьи:

HTML

<h2>...</h2>
<div>
    <div>
        <img src="../images/1.jpg" title="Деревья, листики..." />
    </div>
    <div>
        <img src="../images/2.jpg" title="Зима"  />
    </div>
    ...
</div>

CSS

h2 {
    font-size: 24px;
    text-align: center;
}
div.image_gallery {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
img {
    float: left;
    max-width: 31%;
    height: auto;
    padding: 1%; /* небольшие оступы для изображений */
}

Что получилось? Смотрим: демонстрация 1

При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.

Решим нашу проблему!

 

Добавляем Media Queries

Добавим в CSS следующий код:

/* прошлый CSS */
h2 {}
div.image_gallery {}
img {}

@media screen and (max-width: 768px) { /* разрешение планшета */
    h2 {
        font-size: 20px;
    }
    div.image_gallery {
        min-width: 320px;
    }
    img {
        max-width: 48%; /* 2 изображения в ряд */
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).

Демонстрация 2

В результате фотографии на экране планшета стали выглядеть намного лучше!

 

Теперь разберемся с экраном поменьше.

@media screen and (max-width: 480px) { /* разрешение смартфона */
    h2 {
        min-width: 320px;
        font-size: 16px;
    }
    div.
  image_gallery {
        width: 320px;
        min-width: 320px;
    }
    img {
        max-width: 98%;
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

После добавления этого кода при разрешении экрана меньше либо равного 480 пикселей, изображения вновь перестраиваются и теперь отображаются по одному в ряд.

Демонстрация 3

 

Итог

Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).

Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!

 

Демонстрация 1

Демонстрация 2

 

Спасибо за внимание, жду вас в следующих статьях! Следующая статья: Адаптивная верстка: анимация

Подписывайтесь на рассылку 😉

Что-то осталось неясным, неточным? Пишите в комментариях!

Автор статьи: Alex. Категория: CSS
Дата публикации: 16. 12.2013

Свойство CSS max-width

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установите максимальную ширину элемента

в 150 пикселей:

p.ex1 {
  max-width: 150px;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство max-width определяет максимальную ширину элемента.

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

Если содержимое меньше максимальной ширины, свойство max-width не имеет никакого эффекта.

Примечание: Это предотвращает значение свойство ширины не становится больше, чем максимальная ширина . Значение max-width свойство переопределяет свойство ширины.

Значение по умолчанию: нет
Унаследовано: нет
Анимация:
да, см. отдельные свойства . Читать о анимированном Попытайся
Версия: CSS2
Синтаксис JavaScript: объект .style.maxWidth=»600px» Попытайся

Поддержка браузера

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

Недвижимость
максимальная ширина 1,0 7,0 1,0 2.0.2 7,0

Синтаксис CSS

max-width: none| длина |начальный|наследовать;

Значения свойств

Значение Описание Демо
нет Нет максимальной ширины.
Это по умолчанию		 Играй »
длина Определяет максимальную ширину в пикселях, см и т. д. Подробнее о единицах длины Играй »
% Определяет максимальную ширину в процентах от содержащего блока Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Другие примеры

Пример

Установите максимальную ширину элемента

равной 50% контейнера:

p.ex1 {
максимальная ширина: 50%;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: высота и ширина CSS

Справочник по CSS: свойство min-width

Справочник по HTML DOM: свойство maxWidth

❮ Предыдущий Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник HTML
Учебник CSS
Учебник по JavaScript
How To Tutorial
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery


Top References1 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

html — мультимедийные запросы CSS (экран мультимедиа)

спросил

Изменено 6 лет, 2 месяца назад

Просмотрено 3к раз

У меня есть следующие запросы к моей теме WordPress, и их много ;/

Я новичок в WordPress, поэтому я не могу их правильно понять, но я уверен, что пойму ваше объяснение.

вот что я не понимаю.

1: Я не понимаю, для какого экрана они предназначены.

2: я не понимаю, что такое «max» ( это очень странно )

3: максимальная ширина завершит настройку или что-то в этом роде? потому что у нас есть мин 600 и макс 600

вот код.

  • HTML
  • css
  • wordpress
  • медиа-запросы
  • размер экрана

2

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

 @media (минимальная ширина: 312 пикселей).

Просто вы указываете, что хотите max-width экрана на этом сайте загрузился, вот и все

2) max означает максимальную ширину экрана устройства, к которому применяются следующие стили.

, например:

 @экран мультимедиа и (макс. ширина: 768 пикселей){
  //Эти стили будут применяться, только если размер экрана меньше или равен 768px
}

3) Прекращения нет. Если у вас есть max и min с 600px , то стили будут применяться в соответствии с позицией кода. Код, приведенный ниже, будет применяться (если min код находится в строке номер 10 и max код в строке номер 20, тогда max будет работать)

12

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

Max — стандартный английский термин. Правила применяются, если только ширина не превышает установленный максимум. Он ничего не завершает, правила внутри него применяются только при выполнении условия.

, потому что у нас есть мин. 600 и макс. 600

… с разными наборами правил. Некоторые применяются, когда ширина составляет не менее 600 пикселей, а некоторые применяются, когда она не превышает 600 пикселей.

1

С помощью медиазапросов вы можете определить, при каком разрешении будет применяться ваш стиль. Максимальное значение означает, что если размер экрана больше вашего числа, стиль в медиазапросе не будет применяться. То же самое с min, если размер экрана меньше, чем ваш номер, стиль не будет применяться. Экран означает, что ваш стиль будет применяться, когда на носителе есть экран, например, вы можете написать печать, тогда стиль будет применяться только в том случае, если вы печатаете свой веб-сайт.

1

  • Медиа-запросы определяют тип мультимедиа, который в настоящее время использует ваш сайт в данном случае скрин так что любое устройство — тоже можно ставить специальный css для печати — чтобы сделать ваш сайт удобным для печати. Использование медиа-запросов — основа адаптивного веб-дизайна RWD.

  • min-width его браузер говорит: «Пожалуйста, используйте этот блок правил css, если область просмотра вашего браузера составляет минимум 312 пикселей, поэтому в основном каждое устройство размер области просмотра больше 312 пикселей.

  • max-width говорится, пожалуйста, сделайте этот блок правил css, если область просмотра устройства больше 456 пикселей — поэтому все устройства, которые имеют 455px и меньше не будут запускать эти правила css.

Также есть состояние, такое как @media screen и (min-width: 200px) и (max-width: 1000px) {} — его целевые устройства, размер окна просмотра которых превышает 201px и меньше 999px.

Ссылки:

https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width

https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries

0

Медиа-запросы в основном представляют собой простой оператор if на других языках программирования.

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

max-width : указывает максимальную ширину экрана (или носителя) для правил CSS. Все правила в этой части относятся к экранам ниже и равно значению.

min-width : указывает минимальную ширину экрана (или носителя) для правил CSS. Все правила в этой части относятся к экранам больше указанного значения.

Пример №1 (с использованием min-width ):

@media screen and (min-width: 456px) { ... }

Правила CSS в этой части используются только для экранов компьютеров, планшетов или смартфонов с минимальной шириной экрана 456 пикселей.

Пример №2 (с использованием max-width ):

@media screen and (max-width: 456px) { ... }

Правила CSS в этой части используются только для экранов компьютеров , планшеты или смартфоны с максимальной шириной экрана 456 пикселей.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *