Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Max width media: CSS3-медиазапросы

On

Max width media: CSS3-медиазапросы

By alexxlab

Содержание

CSS media запросы: max-width и max-height

Я хочу использовать условие AND в запросе media. Я использую следующий код, но он не работает

@media screen and (max-width: 995px AND max-height: 700px) {
}

css

responsive-design

media-queries

Поделиться

Источник


Yadhu Babu    

31 января 2017 в 06:54

3 ответа

  • jquery max-height и max-width возвращают неправильные значения

    у меня проблема с максимальной шириной и максимальной высотой. допустим, у меня есть следующее правило css: img.item { max-width: 325px; max-height: 390px; } и следующий img В моем документе: <img class=item…

  • css media запрос max-device-width

    Если у меня есть css 3 media запрос для max-device-width, меняется ли это при изменении ориентации устройства? Например, если iPhone переходит от портрета к пейзажу, меняется ли max-device-width?


4

В нем отсутствуют скобки закрытия и открытия до и после логического оператора

@media (max-width: 995px) and (max-height: 700px) { . .. }

Поделиться


Lex    

31 января 2017 в 07:00


2

Самый правильный и простой способ написать это:

@media screen and (max-width: 995px) and (max-height: 700px) {

}

Поделиться


Kevin Jimenez    

31 января 2017 в 06:59


0

Используйте запятую, чтобы указать два (или более) разных правила:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
 ...
}

От https://developer.mozilla.org/ru/CSS/Media_queries/

…Кроме того, вы можете объединить несколько запросов media в список, разделенный запятыми; если какой-либо из запросов media в списке имеет значение true, применяется связанная таблица стилей. Это эквивалентно логической операции «or».

Поделиться


Awadhesh verma    

31 января 2017 в 06:59

  • Несколько media-запросов: max-width или max-height

    Этот вопрос похож на CSS media запросов: max-width OR max-height , но так как моя репутация недостаточно высока, я не могу добавить комментарий (вопрос) к ответу и хочу добавить к исходному вопросу. Как и плакат в другой теме, у меня есть media запросов с определенными спецификациями для DIVs….

  • firefox css max-width и max-height внутри max-height div

    У меня есть div с максимальной высотой и изображением внутри него, которое должно использовать max-width:100% и max-height:100%. В chromium это работает, но firefox использует только max-width и игнорирует max-heigth. div#overlaycontent{ position:relative; overflow:hidden; height:100%;…

Похожие вопросы:

Media логический оператор запроса AND (max-width и max-height)

Я использую вертикальную навигационную панель на @media (min-height: 490px) ; если высота меньше, она превращается в горизонтальную навигационную панель. Он должен рухнуть ONLY, если…

CSS media запросов: max-width OR max-height

При написании запроса CSS media можно ли каким-либо образом указать несколько условий с помощью логики OR? Я пытаюсь сделать что-то вроде этого: /* This doesn’t work */ @media screen and (max-width:…

Изображение max-width не работает в запросе media

У меня возникла проблема с max-width/max-height внутри media запросов. В основном происходит то, что у меня есть галерея изображений, которая использует jQuery для отображения модального окна. Это…

jquery max-height и max-width возвращают неправильные значения

у меня проблема с максимальной шириной и максимальной высотой. допустим, у меня есть следующее правило css: img.item { max-width: 325px; max-height: 390px; } и следующий img В моем документе:…

css media запрос max-device-width

Если у меня есть css 3 media запрос для max-device-width, меняется ли это при изменении ориентации устройства? Например, если iPhone переходит от портрета к пейзажу, меняется ли max-device-width?

Несколько media-запросов: max-width или max-height

Этот вопрос похож на CSS media запросов: max-width OR max-height , но так как моя репутация недостаточно высока, я не могу добавить комментарий (вопрос) к ответу и хочу добавить к исходному вопросу….

firefox css max-width и max-height внутри max-height div

У меня есть div с максимальной высотой и изображением внутри него, которое должно использовать max-width:100% и max-height:100%. В chromium это работает, но firefox использует только max-width и…

Использование max-width, max-height в сочетании с width, height

Я начинаю изучать css, и я пишу код на основе курса, который смотрю. Автор написал стиль для изображений левой панели так, чтобы они выглядели следующим образом: .left-side img{ width: 100%; height:…

CSS Media запросы относительно свойства max-width, чтобы сделать размер 1024px для планшета и рабочего стола

Я все еще пытаюсь понять, как работают запросы media. У меня есть два запроса media, один из которых нацелен на максимальную ширину: 1024px , а другой-на max-device-width: 1024px для планшета….

Почему некоторые запросы max-width media используют .98px

Недавно я заметил, что Bootstrap V4 изменил свои запросы media с @media screen and (max-width: 991) на @media screen and (max-width: 991.98px) . Разве эти дополнительные .98px что-нибудь меняют?…

Несколько media-запросов: max-width или max-height

Этот вопрос похож на CSS media запросов: max-width OR max-height, но так как моя репутация недостаточно высока, я не могу добавить комментарий (вопрос) к ответу и хочу добавить к исходному вопросу.

Как и плакат в другой теме, у меня есть media запросов с определенными спецификациями для DIVs.

@media only screen and (min-width:460px){
.center{width:250px;}
}

@media only screen and (min-width:960px){
.center{width:350px;)
}

Теперь я хочу, чтобы центр DIV был шириной 250 пикселей, когда экран имеет ширину 960 пикселей, но только 400 пикселей в высоту. Если бы я установил первый media-запрос на это:

@media only screen and (min-width:460px), screen and (max-height:400px){
.center{width:250px;}
}

какой запрос будет использовать мой браузер?
Будет ли минимальная высота преобладать над минимальной шириной? Или он пропустит min-height и перейдет к запросу min-width (960px)?

Я использовал Stack Overflow много, чтобы найти ответы, но не опубликовал ни одного вопроса, так что если это неполно, пожалуйста, дайте мне знать.

-редактирование-
Я ввел неправильное условие (min-height вместо max-height)

css

media-queries

Поделиться

Источник


Doc    

05 декабря 2013 в 09:26

2 ответа

  • Media запросов max-width запускаются при неправильной ширине в Chrome

    Edit: дополнительные исследования говорят, что это на самом деле связано с тем, что jQuery возвращает неправильную ширину и высоту в Chrome 18.0.1025.168 Я настроил некоторые media запросов, а также некоторые javascript в текущем тематическом проекте wordpress. В целом они работают нормально, но…

  • Изображение max-width не работает в запросе media

    У меня возникла проблема с max-width/max-height внутри media запросов. В основном происходит то, что у меня есть галерея изображений, которая использует jQuery для отображения модального окна. Это модальное окно состоит из модального окна, окна содержимого и средства просмотра изображений, внутри…


7

он будет использовать ALL из них, как только условие совпадет. таким образом, правило, используемое для .center, будет последним определяемым (как обычно в css, более поздние определения переопределяют ранние)

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

@media only screen and (min-width:460px) and (max-height:400px){
.center{width:250px;}
}

Поделиться


Ria Weyprecht    

05 декабря 2013 в 09:31


5

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

@media only screen and (min-width:460px), (max-height:400px){
   .center{width:250px;}
}

Поделиться


rnd    

27 марта 2014 в 14:08

Похожие вопросы:

Media логический оператор запроса AND (max-width и max-height)

Я использую вертикальную навигационную панель на @media (min-height: 490px) ; если высота меньше, она превращается в горизонтальную навигационную панель. Он должен рухнуть ONLY, если…

Изменение media запросов с min-width на max-width, чтобы избежать переопределения?

Вместо того, чтобы иметь один огромный файл responsive.css. Я включаю запросы media в один и тот же stylsheet, чтобы сохранить все вместе, например, у меня есть файл wizard.css, с: span.crumbsTxt {…

CSS media запросов: max-width OR max-height

При написании запроса CSS media можно ли каким-либо образом указать несколько условий с помощью логики OR? Я пытаюсь сделать что-то вроде этого: /* This doesn’t work */ @media screen and (max-width:…

Media запросов max-width запускаются при неправильной ширине в Chrome

Edit: дополнительные исследования говорят, что это на самом деле связано с тем, что jQuery возвращает неправильную ширину и высоту в Chrome 18.0.1025.168 Я настроил некоторые media запросов, а также…

Изображение max-width не работает в запросе media

У меня возникла проблема с max-width/max-height внутри media запросов. В основном происходит то, что у меня есть галерея изображений, которая использует jQuery для отображения модального окна. Это…

Должен ли я использовать max-device-width или max-width?

С помощью запросов CSS media вы можете использовать max-device-width для таргетинга ширины устройства (например, устройства iPhone или Android) и / или max-width , который нацелен на ширину…

iPhone 4 ловушки max-width:480px media запросов

iPhone 4 с разрешением 640×960 попадает в media запросов, указанных в: @media only screen and (max-width:480px) Этот запрос media находится в самом конце моей таблицы стилей CSS… Над этим запросом…

Конфликт запросов Media с использованием max-device-width и max-width

Я пытаюсь понять, есть ли какой-либо конфликт между использованием max-device-width для указания определенных элементов для того, чтобы веб-сайт был отзывчивым на устройствах, и использованием…

CSS media запросы: max-width и max-height

Я хочу использовать условие AND в запросе media. Я использую следующий код, но он не работает @media screen and (max-width: 995px AND max-height: 700px) { }

Media запросов min-width VS max-width для адаптивного веб-сайта

С давних пор я использую следующие media запросов для создания адаптивных веб-сайтов // Large devices (desktops, less than 1200px) @media (max-width: 1199px) { … } // Medium devices (tablets, less…

Выбираем медиа-запросы: min-width CSS или max-width CSS

Мне часто задают вопросы вроде: «Стоит ли использовать медиа-запросы (media queries) min-width или max width CSS? Те, кто знаком с адаптивным дизайном, сочтут этот вопрос странным, так как знают, что все зависит от конкретного случая. Сегодня я рад поделиться с вами собственным мнением о том, что на самом деле означает «зависит от конкретного случая».

Большая часть разработчиков до сих пор ориентируется только на пользователей ПК. Часто осознание ситуации приходит, когда становится ясно, сколько сил было потрачено впустую на компоненты для ПК, которые все реже востребованы из-за растущего числа мобильных пользователей. При анализе стилей подобных сайтов чаще всего встречается CSS media max width.

Если дизайн разрабатывался в первую очередь под настольные ПК, значит весь CSS должен быть насыщен объемным кодом для других ключевых точек (breakpoints). Если определенная ширина, заданная для ПК, является точкой отсчета, и мы не станем изменять и переписывать наш CSS, то вполне логично будет поменять в базовых стилях значения ширины окна просмотра на те, которые мы собираемся применять к экранам меньшего размера.

Вот пример, которым я часто пользуюсь (предполагая, что .related принимает форму боковой панели):

.content {
  width: 60%;
}

.related {
  width: 40%;
}

@media screen and (max-width: 37.4em) {
  .content,
  .related {
    width: 100%;
  }
}

Такой подход при использовании со множеством компонентов может существенно увеличить объем CSS завершенного проекта. Но так как блочные элементы по умолчанию занимают 100% ширины родительского элемента, то разумнее было бы прописать все следующим образом:

@media screen and (min-width: 37.5em) {
  .content {
    width: 60%;
  }

  .related {
    width: 40%;
  }
}

Здесь мы используем стандартное положение блочных элементов, и перекрываем их, когда это состояние требуется изменить. Чтобы лучше понять суть всего сказанного, нужно изучить рабочий код таких сайтов.

Есть несколько причин использования в  min width CSS и max width CSS:

  • Если вы получили дизайн только для настольной версии сайта. Если вы получили настольную версию дизайна и несколько дополнительных вариантов для мобильных устройств. В таких случаях можете использовать max-width, но только временно;
  • Вы внедряете адаптивный дизайн в уже работающий сайт, и код его стилей нельзя изменять;
  • Вы пытаетесь компенсировать отсутствие медиа-запросов, и пытаетесь реализовать это с помощью CSS вместо JavaScript.

Обращайте внимание на стандартный вариант отображения конкретного элемента. Если вам нужно переписывать стандартное состояние для меньших экранов, то используйте max-width. Если элемент можно использовать на меньших экранах и при стандартном состоянии, применяйте min-width только в тех случаях, когда элемент должен отличаться от стандартного состояния. И конечно же, я рекомендую вам позволить контенту определять, что и как должно происходить.

Таблицы – отличный пример использования CSS div max width для изменения стандартного состояния элемента, чтобы он лучше отображался на маленьких экранах. Представьте таблицу, контента в которой слишком много, чтобы отображать его полностью на маленьких устройствах. В таком случае мы можем применить следующий код:

@media only screen and (max-width: 30em) {
  .big-table tr,
  .big-table td {
    display: block;
  }
}

Этот код позволит нам преобразовать каждую строку (и ячейку) в блок. В результате таблица может стать длинной по вертикали, но зачастую это меньшее из зол. Я имею в виду длинные таблицы, которые приходится прокручивать по горизонтали. В таких ситуациях лучше всего оставить таблицы без изменений, за исключением кода для тех браузеров, которые понимают медиа-запросы, и случаев, когда ширина экрана не превышает определенного значения (30em в нашем случае).

Другие элементы, которые в стандартном состоянии отлично смотрятся на маленьких экранах, нужно изменять лишь по необходимости для экранов большего размера. В таких случаях и применяется min-width.

Вкратце: позвольте стандартному состоянию элементов помочь вам определить, какой медиа-запрос использовать.

Данная публикация является переводом статьи «Choosing between min-width and max-width media queries» , подготовленная редакцией проекта.

Медиавыражения в CSS — это не только max-width / Хабр

Недавно мы опубликовали новый веб-сайт нашей компании Mabiloft с полностью переработанным чистым дизайном и множеством новых великолепных иллюстраций и анимаций.

После того, как наш дизайнер проделал потрясающую работу, продумав и нарисовав сайт, нам, разработчикам, было необходимо реализовать макет, сохранив его чистым и цельным для каждого устройства, от большого 2K экрана, на которых мы пишем код, до старого iPhone 4 с его 3.5-дюймовым дисплеем.

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

Разыскивая решение сложившейся проблемы, я обнаружил, что мог бы сделать оба макета идеальными, используя только CSS медиавыражения, не прибегая к использованию JavaScript.

Фактически, до этого я в основном использовал CSS медиавыражения, чтобы сделать макет отзывчивым, используя max-width и min-width.

Теперь я обнаружил, что CSS-медиавыражения – это не только max-width, а множество разных значений. И некоторые из них могут быть действительно полезны в повседневной жизни.

Итак, что же это за медиавыражения, о которых я говорю? Возможно, о некоторых вы уже слышали. Но я также выделил из них и несколько новых, применение которых может быть весьма полезным

Размер вьюпорт

Да, я говорю о

width, height, min-width, min-height, max-width

и

max-height

.

Нуждаются ли они в особом представлении? Я буду краток.

Эти медиа-функции используются для установки разных стилей для разных размеров экрана. Они очень полезны при разработке отзывчивой системы.

Поскольку функции width и height могут устанавливать стили только для точно заданного размера области видимости, более вероятно, что вы будете использовать префиксы max- и min-. Например, в следующем коде стили будут применяться, только если высота вьюпорт больше 320 пикселей.

/* Красный фон применится, только если высота вьюпорт больше 320 пикселей */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (min-height: 320px) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}

Но вы также можете смешивать эти функции для обработки диапазона размеров

/* Красный фон применится, если ширина области видимости от 320 до 600 пикселей */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (min-width: 320px) and (max-width: 600px) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}

Следующий пример демонстрирует, как можно использовать функцию max-width для изменения цвета фона в зависимости от ширины области видимости

body {
  background-color: #0EAD69;
}
 
@media screen and (max-width: 1600px) {
  body {
    background-color: #3BCEAC;
  }
}
 
@media screen and (max-width: 1280px) {
  body {
    background-color: #FFD23F;
  }
}
 
@media screen and (max-width: 960px) {
  body {
    background-color: #EE4266;
  }
}
 
@media screen and (max-width: 600px) {
  body {
    background-color: #540D6E;
  }
}

Ориентация экрана

Orientation

– это хорошая медиа-функция, которая позволяет вам производить изменения в зависимости от ориентации дисплея. Она может иметь два значения:

portrait

(портрет) и

landscape

(пейзаж/альбом).

Но что браузер считает портретом, а что пейзажем? Значение портрета будет инициировать изменения каждый раз, когда высота области видимости больше ширины. Аналогично, если ширина больше высоты, вьюпорт будет считаться «альбомным».

Например, этот код даёт следующий результат:

/* Красный фон применяется только, если ориентация экрана альбомная */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (orientation: landscape) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}

Соотношение сторон

Данная медиа-функция похожа на функцию ориентации, но является более точной. Вы можете установить правила для конкретного необходимого соотношения сторон. Например, можно установить разную разметку для телефонов с экранами 16/9 и 18/9.

Эта функция также может иметь префикс max- и min- для обработки диапазона экранов с разным соотношением сторон

Наведение и указатель

Итак, я попробую объяснить эти медиа-функции как можно проще, ведь они достаточно полезны.

Обе медиа-функции hover и pointer относятся к определению основного механизма ввода на сайте. Например, мышь. Или палец, если вы используете смартфон. Чтобы определить все механизмы ввода, можно использовать функции any-hover и any-pointer.

А теперь перейдем к тому, что же они делают?

Функция hover (и any-hover) позволяет браузеру узнать, может ли основной механизм ввода наводиться на элементы (например, как курсор мыши).

Вы можете использовать эту функцию для определения основного механизма ввода, который

  • hover: hover, может наводиться на элементы

  • hover: none, не может наводиться на элементы или механизма ввода с возможностью наведения нет вообще

Когда это стоит использовать? Например, когда вы хотите обрабатывать анимацию наведения на мобильных устройствах, где механизм ввода (палец) не может наводиться на элементы.

Функции pointer (и any-pointer) позволяют браузеру узнать, имеет ли основной механизм ввода указатель (например, мышь) и если имеет, то насколько он точный.

Вы можете использовать эту функцию для определения основного механизма ввода, который:

  • pointer: coarse, включает в себя указательно ограниченной точности

  • pointer: fine, включает в себя точное указатель

  • pointer: none, не включает в себя указатель

Это полезно, например, для увеличения области нажатия на устройства с неточным указателем

Эй, это всё скучно. Где новые крутые функции, о которых упоминалось раньше?

Вот они!

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

Инвертированные цвета

Функция инвертированных цветов очень полезна, если вам нужно применить некоторые стили, когда системные цвета имеют такую же настройку.

Зачем включать инвертирование системных цветов? Обычно это очень полезно, если хочется улучшить читаемость.

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

У данной функции есть только два значения:

  • inverted: применить стили, если цвета инвертированы

  • none: применить стили по умолчанию

Вот пример! Когда цвета инвертируются, размер текста увеличивается

.text {
  font-size: 24px;
}
 
@media screen and (inverted-colors: inverted) {
  .text {
    font-size: 36px;
  }
}


Пожалуйста, обратите внимание, что в данный момент эта функция поддерживается только в Safari (на macOS и iOS). Всегда актуальный список поддерживаемых браузеров можно найти здесь

Предпочитаемая цветовая схема

Это одна из моих любимых функций, и я надеюсь, что постепенно она станет популярной.

Функция позволяет разработчикам устанавливать различные варианты оформления для элементов, если изменяется цветовая схема. И Windows и macOS позволяет пользователям менять системную цветовую схему со светлой на тёмную и обратно. iOS 13 также представила эту функцию, а для пользователей Android эта возможность станет доступной с приходом Android Q.

Поддержка браузерами также приличная. На данный момент последние версии Google Chrome, Mozilla Firefox и Safari поддерживают эту функцию. На мобильных устройствах её также поддерживают все основные браузеры, кроме Opera. Всегда актуальный список поддерживаемых браузеров можно найти здесь

Значения для этой функции достаточно понятны интуитивно:

  • light: применить стили, если пользователь предпочитает светлую тему

  • dark: применить стили, если пользователь предпочитает тёмную тему

  • no-preference: применить стили по умолчанию

Посмотреть, насколько крута эта функция, можно в примере ниже!

.appbar {
  background-color: #EE4266;
}
 
.fab {
  background-color: #424242;
}
 
@media screen and (prefers-color-scheme: dark) {
  body {
    background-color: #424242;
  }
 
  .appbar {
    background-color: #212121;
  }
 
  h3 {
    color: #fff;
  }
 
  .fab {
    background-color: #EE4266;
  }
}

Установка системной тёмной темы делает страницу также тёмной

Сокращение количества анимации

Это также очень важно. Лично я люблю анимации и переходы, и я думаю, что правильная анимация может действительно улучшить удобство взаимодействия с сайтом. Но не всем нравятся анимации и, что более важно, у некоторых людей могут быть вестибулярные расстройства, из-за которых может возникать укачивание и головокружение. Я нашел полезную

статью

, которая очень хорошо объясняет подобные явления.

В общем, на наиболее важных десктопных и мобильных операционных системах существует опция доступности, позволяющая решить эти проблемы путём уменьшения подвижности элементов.

Эта функция может иметь два значения:

  • reduce: применяет стили, если пользователь не хочет видеть анимации и переходы. Это значение обычно используется для их отключения

  • no-preference: применяет обычные стили

Проверьте эту функцию в примере ниже:

.pulse {
  animation: pulse 2s infinite;
}
 
@media screen and (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}

Анимация пульсации прекращается, когда пользователь выбирает снижения подвижности элементов

Браузерная совместимость для этой функции достаточно хорошая. В данный момент только Edge и IE не поддерживают её. Всегда актуальный список поддерживаемых браузеров можно найти здесь

Заключение

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

Хотелось бы упомянуть еще о некоторые функциях, как например, light-level, которая может использоваться для проверки уровня окружающего освещения, но большинство недавно представленных функций медиавыражений всё еще не имеют поддержки ни одним из браузеров, так что… еще не пришло время.

Примеры кода

Вы можете ознакомиться с примерами кода здесь. Код находится в открытом доступе на Github.

Кто мы

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

Media min width and max width

Мне часто задают вопросы вроде: « Стоит ли использовать медиа-запросы (media queries) min-width или max width CSS ? Те, кто знаком с адаптивным дизайном, сочтут этот вопрос странным, так как знают, что все зависит от конкретного случая. Сегодня я рад поделиться с вами собственным мнением о том, что на самом деле означает «зависит от конкретного случая ».

Ориентир на настольные ПК и max-width

Большая часть разработчиков до сих пор ориентируется только на пользователей ПК. Часто осознание ситуации приходит, когда становится ясно, сколько сил было потрачено впустую на компоненты для ПК, которые все реже востребованы из-за растущего числа мобильных пользователей. При анализе стилей подобных сайтов чаще всего встречается CSS media max width .

Если дизайн разрабатывался в первую очередь под настольные ПК, значит весь CSS должен быть насыщен объемным кодом для других ключевых точек ( breakpoints ). Если определенная ширина, заданная для ПК, является точкой отсчета, и мы не станем изменять и переписывать наш CSS , то вполне логично будет поменять в базовых стилях значения ширины окна просмотра на те, которые мы собираемся применять к экранам меньшего размера.

Вот пример, которым я часто пользуюсь ( предполагая, что .related принимает форму боковой панели ):

Такой подход при использовании со множеством компонентов может существенно увеличить объем CSS завершенного проекта. Но так как блочные элементы по умолчанию занимают 100% ширины родительского элемента, то разумнее было бы прописать все следующим образом:

Здесь мы используем стандартное положение блочных элементов, и перекрываем их, когда это состояние требуется изменить. Чтобы лучше понять суть всего сказанного, нужно изучить рабочий код таких сайтов.

max-width вместо более подходящего решения

Есть несколько причин использования в CSS min width max width :

  • Если вы получили дизайн только для настольной версии сайта. Если вы получили настольную версию дизайна и несколько дополнительных вариантов для мобильных устройств. В таких случаях можете использовать max-width , но только временно;
  • Вы внедряете адаптивный дизайн в уже работающий сайт, и код его стилей нельзя изменять;
  • Вы пытаетесь компенсировать отсутствие медиа-запросов, и пытаетесь реализовать это с помощью CSS вместо JavaScript .

Так что же лучше использовать?

Обращайте внимание на стандартный вариант отображения конкретного элемента. Если вам нужно переписывать стандартное состояние для меньших экранов, то используйте max-width . Если элемент можно использовать на меньших экранах и при стандартном состоянии, применяйте min-width только в тех случаях, когда элемент должен отличаться от стандартного состояния. И конечно же, я рекомендую вам позволить контенту определять, что и как должно происходить.

Таблицы – отличный пример использования CSS div max width для изменения стандартного состояния элемента, чтобы он лучше отображался на маленьких экранах. Представьте таблицу, контента в которой слишком много, чтобы отображать его полностью на маленьких устройствах. В таком случае мы можем применить следующий код:

Этот код позволит нам преобразовать каждую строку ( и ячейку ) в блок. В результате таблица может стать длинной по вертикали, но зачастую это меньшее из зол. Я имею в виду длинные таблицы, которые приходится прокручивать по горизонтали. В таких ситуациях лучше всего оставить таблицы без изменений, за исключением кода для тех браузеров, которые понимают медиа-запросы, и случаев, когда ширина экрана не превышает определенного значения ( 30em в нашем случае ).

Другие элементы, которые в стандартном состоянии отлично смотрятся на маленьких экранах, нужно изменять лишь по необходимости для экранов большего размера. В таких случаях и применяется min-width .

Вкратце: позвольте стандартному состоянию элементов помочь вам определить, какой медиа-запрос использовать.

Данная публикация представляет собой перевод статьи « Choosing between min-width and max-width media queries » , подготовленной дружной командой проекта Интернет-технологии.ру

Статья, в которой познакомимся с медиа запросами и научимся применять их для создания адаптивных сайтов. Рассмотрим основные конструкции media запросов для использования их в вёрстке страниц с использованием фреймворков Bootstrap 3 и Bootstrap 4.

Что такое медиа запросы?

Медиа запросы (media queries) — это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Поддержка браузерами CSS3 медиа запросов (media queries)

Медиа запросы предназначены для создания адаптивных дизайнов сайтов. Адаптивный дизайн отличается от других тем, что он может «приспосабливаться» (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер). Более подробно познакомиться с адаптивным дизайном можно в статье «Что такое адаптивная разметка».

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение дизайнов адаптивных сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы. Более подробно разобраться, как работает метатег viewport можно в статье «Знакомство с meta viewport».

Подключение метатега viewport к странице в большинстве случаях осуществляется так:

Синтаксис медиа запросов

Для создания медиа запросов используется следующий синтаксис:

Основные типы устройств:

  • all — все устройства (по умолчанию).
  • print — принтеры и режим предварительного просмотра страницы перед печатью.
  • screen — устройства с дисплеями.
  • and — требует обязательного выполнения всех указанных условий.
    Например:Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме.
  • , (запятая) — требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе.Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape.
  • not — предназначен для отрицания указанного условия. Имеет по отношению к оператору and меньший приоритет, т.е. оператор not всегда выполняется после and .Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно).
    Т.е. запрос в вышеприведённом примере будет обрабатываться так:

Медиа функции

Для составления условия в @media можно использовать следующие фукнции:

  • width — указывает требования к ширине области просмотра устройства (браузера).
  • min-width — задаёт минимальную ширину области viewport в px , em или других единицах.
  • max-width — указывает на то, какой должна быть максимальная рабочая область устройства (браузера).
  • height , min-height и max-height — задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport.
  • orientation — функция, которая проверяет то, в каком режиме ( portrait или landscape ) отображается страница.
    Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка:
  • aspect-ratio ( min-aspect-ratio , max-aspect-ratio ) — позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения.
  • resolution ( min-resolution , max-resolution ) — указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины: dpi (количество точек на дюйм), dpcm (количество точек на сантиметр), dppx (количество точек на пиксель).

Использование медиа-запросов при подключении файлов CSS

Медиа запросы также можно применять в качестве значения атрибута media элемента link . Это позволит в зависимости от параметров устройства определить, какие файлы CSS необходимо подсоединить к странице, а какие нет. Обычно данный функционал используется тогда, когда к разным классам устройств необходимо применить различные стили CSS.

Кроме этого медиа запросы можно также использовать в правиле @import , которое предназначено для импортирования стилей из других файлов CSS в текущий.

Медиа запросы для Bootstrap 3

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

Вышеприведённые запросы необходимо использовать только в указанном порядке.

Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width . Это заставит их работать только в указанном диапазоне.

Медиа запросы для Bootstrap 4

Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):

Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):

Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:

Код JavaScript, учитывающий параметры устройств

Наиболее простой способ создания кода JavaScript, учитывающий параметры устройств (аналогично CSS медиа запросам), осуществляется с помощью метода matchMedia объекта window .

Осуществляется это следующим образом:

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

Метод matchMedia не поддерживается Internet Explorer 9 и другими старыми браузерами. Для того чтобы обеспечить эту функциональность в старых браузерах можно воспользоваться методом mq библиотеки Modernizr.

Поддержка браузерами метода matchMedia (JavaScript) — ноябрь 2016

В 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств. В качестве медиа-типов были определены следующие: aural , braille , handheld , print , projection , screen , tty , tv . Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.

Кроме того, было введено ключевое слово all , которое использовалось, чтобы указать, что таблица стилей применяется ко всем типам носителей.

В HTML4 медиа-запрос записывался следующим образом:

Внутри таблицы стилей также можно было объявить, что блоки объявлений должны применяться к определенным типам носителей:

Предусматривая возможность введения новых значений и значений с параметрами в будущем, для браузеров была реализована поддержка значений атрибута медиа-носителя, указанных следующим образом:

Текущий синтаксис HTML5 и CSS3 напрямую ссылается на первую спецификацию Media Queries, обновляя правила для HTML. Также был расширен список характеристик медиа-носителей.

Медиазапросы, характеристики устройств и разрешения экрана

  • Содержание:
  • 1. Что такое медиа-запрос
  • 2. Логические операторы
  • 3. Тип носителя
  • 4. Характеристики носителя
  • 5. Метатег viewport
  • 6. На какие разрешения экрана нужно ориентироваться
  • 7. Стратегии использования медиа-запросов
Поддержка браузерами

IE: 9.0 (кроме вложенных медиазапросов)
Edge: 12.0
Firefox: 3.5
Chrome: 26.0
Safari: 6.1
Opera: 10.1
iOS Safari: 7.1
Android: 4.4
Chrome for Android: 55.0

1. Что такое медиа-запрос

В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width . Медиа-запрос является логическим выражением, которое возвращает истину или ложь.

Медиа-запросы могут быть добавлены следующими способами:

1) С помощью HTML:

2) С помощью правила @import внутри элемента

4) Внутри таблицы стилей style.css:

Таблица стилей, прикрепленная через тег
, будет загружаться вместе с документом, даже если её медиа-запрос вернет ложь.

Для поддержки медиа-запросов в старых браузерах можно воспользоваться JavaScript-библиотекой css3-mediaqueries.js , доступную по адресу https://code.google.com/archive/p/css3-mediaqueries-js/.

2. Логические операторы

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

2.1. Оператор and

Оператор and связывает друг с другом разные условия:

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

Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.

Правило @media all and (max-width: 600px) <. >равнозначно правилу @media (max-width: 600px) <. >.

2.2. Оператор запятая

Оператор запятая работает по аналогии с логическим оператором or .

В данном случае CSS-стили, заключенные в фигурные скобки, сработают только для экранных или проекционных устройств.

2.3. Оператор not

Оператор not позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос

будет эквивалентен запросу

Если медиазапрос составлен с использованием оператора запятая, то отрицание будет распространяться только на ту часть, которая идет до запятой, т.е. запрос

будет эквивалентен запросу

2.4. Оператор only

Оператор only используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).

Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media=»only» . Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.

3. Тип носителя

Тип носителя представляет собой тип устройства, например, принтеры, экраны.

Таблица 1. Тип носителя

ЗначениеОписание
allПодходит для всех типов устройств.
printПредназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати.
screenПредназначен в первую очередь для экранов цветных компьютерных мониторов.
speechПредназначен для синтезаторов речи.

CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural , braille , embossed , projection , tty , tv и handheld , но они приняты устаревшими в Media Queries 4 и не будут использоваться.

4. Характеристики носителя

К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.

Таблица 2. Характеристики носителя

ПараметрОписание
widthПроверяет ширину области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (width: 800px) . Обычно для проверки используются минимальные и максимальные значения ширины.
min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе.
heightПроверяет высоту области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (height: 500px) . Обычно для проверки используются минимальные и максимальные значения высоты.
min-height применяет правило если высота области просмотра больше значения, указанного в запросе, max-height — высота области просмотра которого меньше значения, указанного в запросе.
aspect-ratioПроверяет соотношение ширины к высоте области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как (aspect-ratio: 16/9) .
min-aspect-ratio проверяет минимальное соотношение, max-aspect-ratio — максимальное соотношение ширины к высоте области просмотра.
orientationПроверяет ориентацию области просмотра. Принимает два значения: (orientation: portrait) и (orientation: landscape) .
resolutionПроверяет разрешение экрана (количество пикселей). Значения также могут проверять количество точек на дюйм (dpi) или количество точек на сантиметр (dpcm), например, (resolution: 300dpi) .
min-resolution проверяет минимальное разрешение экрана, max-resolution — максимальное.

grid

Проверяет, относится ли определенное устройство к устройствам с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

—>

colorПроверяет количество бит на каждый из цветовых компонентов устройства вывода. Например, (min-color: 4) означает, что экран конкретного устройства должен иметь 4-битную глубину цвета.
min-color проверяет минимальное количество бит, max-color — максимальное количество бит.color-indexПроверяет количество записей в таблице подстановки цветов. В качестве значения указывается положительное число, например, (color-index: 256) .
min-color-index проверяет минимальное количество записей, max-color-index — максимальное количество записей.monochromeПроверяет количество битов на пиксель монохромного устройства. Значение задается целым положительным числом, например, (min-monochrome: 8) .
min-monochrome проверяет минимальное количество битов, max-monochrome — максимальное количество битов.-webkit-device-pixel-ratioЗадаёт количество физических пикселей устройства на каждый CSS-пиксель.

device-width , device-height , device-aspect-ratio являются устаревшими API, они удалены из Media Queries Level 4.

5. Метатег viewport

Для управления разметкой в мобильных браузерах используется метатег viewport . Изначально данный тег был представлен разработчиками Apple для браузера Safari на iOS. Мобильные браузеры отображают страницы в виртуальном окне просмотра, которое обычно шире, чем экран устройства. С помощью метатега viewport можно контролировать размер окна просмотра и масштаб.

Страницы, адаптированные для просмотра на разных типах устройств, должны содержать в разделе метатег viewport .

Свойство width определяет виртуальную ширину окна просмотра, значение device-width — физическую ширину устройства. Другими словами, width отражает значение document.documentElement.clientWidth , а device-width — screen.width .

При первой загрузке страницы свойство initial-scale управляет начальным уровнем масштабирования, initial-scale=1 означает, что 1 пиксель окна просмотра = 1 пиксель CSS.

Рис. 2. Разница между width и device-width

6. На какие размеры экрана нужно ориентироваться

При составлении медиазапросов нужно ориентироваться на так называемые переломные (контрольные) точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта существенно меняется, например, появляется горизонтальная полоса прокрутки. Чтобы определить эти точки, нужно открыть сайт в браузере и постепенно уменьшать область просмотра.

Чтобы проверить, как выглядит ваш сайт на разных устройствах, можно воспользоваться сервисом Responsive design testing for the masses.

7. Стратегии использования медиа-запросов

Для создания дизайна, позволяющего лучшим образом отображать сайт на различных устройствах, используют общие стратегии медиа-запросов:
1) Уменьшение количества колонок (столбцов) и постепенная отмена обтекания для мобильных устройств.
2) Использование свойства max-width вместо width при задании ширины блока-контейнера.
3) Уменьшение полей и отступов на мобильных устройствах (например, нижних отступов между заголовком и текстом, левого отступа для списков и т.п.).
4) Уменьшение размеров шрифтов для мобильных устройств.
5) Превращение линейных навигационных меню в раскрывающиеся.
6) Скрытие второстепенного содержимого на мобильных устройствах с помощью display: none .
7) Подключение фоновых изображений уменьшенных размеров.

Рекомендуем к прочтению

Выбираем между «min-width» и «max-width»

12 января 2016



Facebook

Twitter

Вконтакте

Google+

Pinterest

Довольно часто возникает вопрос, когда стоит использовать min-width, а когда max-width? Тем, для кого отзывчивый дизайн стал привычным делом, такой вопрос может показаться странным. И такие люди знают ответ: все зависит от ситуации . Но анализ исходников сайnов показывает, что многие дизайнеры и разработчики до сих пор не очень в этом уверены. В этой статье мы попробуем разобраться, что значит \»все зависит от ситуации\» в отношении конкретно этого вопроса.

Десктопные версии и max-width

Существует немалое количество дизайнеров/разработчиков, которые до сих пор считают своим основным направлением дизайна десктоп , а остальные (в основном меньшие) размеры экранов второстепенными; зачастую это отговорка, так как разработка для этой категории устройств требует значительно большего количества усилий, по сравнению с их десктопными конкурентами. Как правило, если исследовать CSS этих сайтов, в них в основном используется медиазапрос max-width.

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

Это может привести к ситуации, которую в шутку называют написание стилей только для того, чтобы потом их убрать . Вот неплохой пример (будем считать, что .related принимает форму боковой панели):

.content {
  width: 60%;
}
.related {
  width: 40%;
}
@media screen and (max-width: 37.4em) {
  .content,
  .related {
    width: 100%;
  }
}

Приведенный выше пример сильно упрощен, но достаточен, чтобы объяснить о чем идет речь. Данный подход, если в нем использовать слишком много компонентов, может существенно увеличить количество CSS, необходимого для завершения проекта. Но основная проблема заключается в том, что он нелогичен, потому что при условии, что блочные элементы занимают 100% их родительских элементов по умолчанию, следующий вариант имеет больше смысла:

@media screen and (min-width: 37.5em) {
  .content {
    width: 60%;
  }
  .related {
    width: 40%;
  }
}

Здесь мы используем состояние блочных элементов по умолчанию и предопределяем их, когда им нужно изменить это состояние. Опять же, некоторым читателям это покажется очевидным, но если посмотреть на исходники многих сайтов, вы поймете, почему это требует объяснения.

Использование max-width вопреки здравому смыслу

Есть несколько причин, почему, даже если вы знаете, как сделать лучше, следует нарочно использовать поход с max-width, похожий на описанный выше:

  1. Вы разработчик, и вы получили от дизайнера макеты только для десктопа , преимущественно для десктопа или для других размеров в качестве отмазки . Если перед вами стоит задача создать сайт только для десктопных экранов, этим и занимайтесь. Если у вас есть довольно привлекательный десктопный дизайн с несколькими примерами мобильных устройств или планшетов, этим и занимайтесь. В таких случаях, пользуйтесь max-width, если только у вас нет бюджета и/или времени, чтобы рефакторить дизайн в процессе разработки.
    1. Вы делаете отличный сайт отзывчивым, и имеющийся CSS это ваш груз, который вы получили и не можете изменять по каким бы то ни было причинам.
    2. Вы пытаетесь компенсировать тот факт, что на данный момент у нас нет запросов элементов, и пытаетесь справиться с этим с помощью CSS вместо того, чтобы использовать полифил JavaScript для несуществующих спецификаций.

Так что же лучше использовать?

Посмотрите на стандартную форму отображения заданного элемента. Если вам нужно переопределить такое стандартное значение ради меньших экранов, используйте max-width. Если стандартное значение можно использовать на малых экрана, используйте min-width, но только если элемент должен отклоняться от значения по умолчанию. И, конечно же, стоит позволить контенту определять, где это должно происходить.

Хороший пример использования max-width для переопределения стандартной формы отображения элемента, чтобы это смотрелось лучше на меньших экранах это использование планшетов. Представьте себе таблицу, содержащую слишком много контента, чтобы его можно было отображать в стандартной форме на малом экране. Вот один из возможных подходов:

@media only screen and (max-width: 30em) {
  .big-table tr,
  .big-table td {
    display: block;
  }
}

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

В данном случае, имеет смысл оставить таблицу в стандартном виде, за исключением браузеров, которые распознают медиазапросы, и когда экран не более 30em (в приведенном примере).

Прочие элементы (возможно даже большинство элементов), имеющие стандартный формат, который неплохо работает на небольших экранах, должны изменяться, только если это необходимо на больших экранах. Тогда лучше использовать min-width.

Если коротко, позвольте стандартной форме отображения элементов помочь вам определить, какую из функций лучше всего использовать в медиазапросах.

Facebook

Twitter

Вконтакте

Google+

Pinterest


CSS-свойства и media queries — Help Mail.ru. Для разработчиков

Полный список CSS-свойств и  media queries, которые поддерживает Почта Mail.ru, смотрите на caniemail.com.

CSS-свойства
















































azimuth

сolumn-rule-color

outline

background

column-rule-style

outline-color

background-blend-mode

column-rule-width

outline-style

background-clip

column-span

outline-width

background-color

column-width

overflow

background-image

columns

overflow-x

background-origin

direction

overflow-y

background-position

display

padding

background-repeat

elevation

padding-bottom

background-size

empty-cells

padding-left

border

float

padding-right

border-bottom

font

padding-top

border-bottom-color

font-family

pause

border-bottom-left-radius

font-feature-settings

pause-after

border-bottom-right-radius

font-kerning

pause-before

border-bottom-style

font-size

pitch

border-bottom-width

font-size-adjust

pitch-range

border-collapse

font-stretch

quotes

border-color

font-style

richness

border-left

font-synthesis

speak

border-left-color

font-variant

speak-header

border-left-style

font-variant-alternates

speak-numeral

border-left-width

font-variant-caps

speak-punctuation

border-radius

font-variant-east-asian

speech-rate

border-right

font-variant-ligatures

stress

border-right-color

font-variant-numeric

table-layout

border-right-style

font-weight,height

text-align

border-right-width

image-orientation

text-combine-upwrite

border-spacing

image-resolution

text-decoration

border-style

isolation

text-decoration-color

border-top

letter-spacing

text-decoration-line

border-top-color

line-height

text-decoration-skip

border-top-left-radius

list-style

text-decoration-style

border-top-right-radius

list-style-position

text-emphasis

border-top-style

list-style-type

text-emphasis-color

border-top-width

margin

text-emphasis-style

border-width

margin-bottom

text-indent

box-sizing

margin-left

text-orientation

break-after

margin-right

text-overflow

break-before

margin-top

text-transform

break-inside

max-height

text-underline-position

caption-side

max-width

unicode-bidi

clear

min-height

vertical-align

color

min-width

voice-family

column-count

mix-blend-mode

width

column-fill

object-fit

word-spacing

column-gap

object-position

writing-mode

column-rule

opacity

Media queries





all

min-device-width

max-resolution

screen

max-device-width

and

min-width

orientationonly

max-width

min-resolution

prefers-color-scheme

CSS свойство максимальной ширины

Пример

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

на 150 пикселей:

p.ex1 {
max-width: 150 пикселей;
}

Попробуй сам »

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

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

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

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

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

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

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

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

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

Имущество
максимальная ширина 1.0 7,0 1,0 2.0.2 7,0

Синтаксис CSS

максимальная ширина: нет | длина | начальная | наследование;

Стоимость недвижимости

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

Пример

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

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

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

Попробуй сам »

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

Учебник

CSS: высота и ширина CSS

Ссылка CSS: свойство min-width

Ссылка на HTML DOM: свойство maxWidth

Мин. Ширина, максимальная ширина и запросы мультимедиа | by Banuri Wickramarathna

Медиа-запросы — это концепция, которая играет важную роль в адаптивном веб-дизайне.Под адаптивным веб-дизайном понимается создание веб-страниц, которые могут динамически изменять свой внешний вид в соответствии с экраном пользователя (мобильный, планшет, ноутбук, ПК и т. Д.) С целью улучшения взаимодействия с пользователем. Можно сказать, что это похоже на добавление условий в файл .css.

Синтаксис

@media media-type и (media-feature) {

}

Media types

Это тип категории устройства. Обычно используемые типы носителей — «экраны», «печать».

Функции мультимедиа

Функции мультимедиа Это необязательно в мультимедийных запросах. По сути, это еще больше изменит взаимодействие с пользователем в зависимости от поведения и функций пользователя и устройства вывода. Некоторые часто используемые мультимедийные функции упомянуты ниже.

  • Ориентация
  • Разрешение
  • Соотношение сторон
  • Ширина
  • Высота

Основное объяснение минимальной и максимальной ширины

Есть другие точки останова для устройств, которые вы можете протестировать.Хотя мы используем термин «экраны устройств», на самом деле мы принимаем во внимание ширину экрана. Из-за этого давайте разберемся с min-width и max-width на небольшом примере.

Min-width:

В приведенном выше примере говорится, что элемент HTML с именем id как «ButtonWrapper» примет ширину 100% (от его родительского элемента), когда ширина устройства больше или равна 1024 пикселей.

Max-width:

max -width означает меньшую или равную ширине, указанной в этом медиа-запросе.Итак, в приведенном выше примере элемент, имеющий «#ButtonWrapper» в качестве идентификатора, получит ширину 70% от ширины всех экранов, которые меньше или равны 1024 пикселям.

Логические операторы

Поскольку эти медиа-запросы известны как своего рода операторы if, мы можем использовать логические операторы, чтобы сделать их более сложными и эффективными. Можно использовать все основные логические операторы, такие как «И», «ИЛИ» и «НЕ». Возьмем по одному.

AND Оператор:

В соответствии с приведенным ниже примером элемент класса «buttonWrapper» будет занимать 70% ширины от всей ширины экрана, которая больше или равна 768 пикселей и меньше или равна 1024 пикселей.Оператор действует как его же корневая функция.

Оператор ИЛИ:

На самом деле это различные медиа-запросы, разделенные запятыми. Разработчики используют это, чтобы уменьшить количество строк кода. Не только это, но и «ИЛИ» можно использовать для медиа-запросов, которые используют общий набор стилей.

Итак, со ссылкой на пример ниже, класс «buttonWrapper» получит 80% ширины для всех экранов, которые больше или равны 768 пикселей по ширине, а также больше или равны 1024 пикселей по ширине.

Оператор NOT:

Это будет применяться к тем местам, где условие в медиа-запросе было ложным.

W Что такое точка останова? Я почти уверен, что теперь вы можете задаться вопросом, что такое точки останова. Это место, где ваш дизайн должен измениться, чтобы выглядеть лучше. Другими словами, ситуация, когда контент начинает выглядеть плохо и трудно читаемым для пользователя, это та точка, где мы должны применить медиа-запрос.
Теперь вы можете запутаться с этими двумя ключевыми словами, медиа-запросом и точкой останова.Это то же самое? Да, это так.

Это было краткое введение о том, что такое медиа-запрос, и объяснение того, что на самом деле подразумевается под максимальной шириной и минимальной шириной со ссылкой на концепцию медиа-запроса. Надеюсь, все ясно.

До следующей статьи! 😊

Обзор · Bootstrap

Компоненты и опции для компоновки вашего проекта Bootstrap, включая упаковку контейнеров, мощную систему сеток, гибкий медиа-объект и адаптивные служебные классы.

Контейнеры

Контейнеры являются самым основным элементом макета в Bootstrap и требуют при использовании нашей сеточной системы по умолчанию . Выберите из адаптивного контейнера фиксированной ширины (это означает, что его максимальная ширина изменяется в каждой точке останова) или гибкой ширины (что означает, что он всегда имеет ширину 100% и ).

Хотя контейнеры могут быть вложенными, для большинства макетов вложенный контейнер не требуется.

Используйте .container-fluid для контейнера полной ширины, охватывающего всю ширину области просмотра.

  

  ...

Адаптивные точки останова

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

Bootstrap в основном использует следующие диапазоны медиа-запросов — или точки останова — в наших исходных файлах Sass для нашей разметки, системы сеток и компонентов.

  // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
// Нет медиа-запроса, так как это значение по умолчанию в Bootstrap

// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) {...}

// Средние устройства (планшеты, 768 пикселей и выше)
@media (min-width: 768 пикселей) {...}

// Большие устройства (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) {...}

// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) {...}

Поскольку мы пишем наш исходный CSS на Sass, все наши медиа-запросы доступны через миксины Sass:

  @include media-breakpoint-up (xs) {...}
@include media-breakpoint-up (sm) {...}
@include media-breakpoint-up (md) {...}
@include media-breakpoint-up (lg) {...}
@include media-breakpoint-up (xl) {...}

// Пример использования:
@include media-breakpoint-up (sm) {
  .some-class {
    дисплей: блок;
  }
}

Иногда мы используем медиа-запросы, которые идут в другом направлении (данный размер экрана или меньше ):

  // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575.98px) {...}

// Маленькие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей)
@media (max-width: 767,98 пикселей) {...}

// Средние устройства (планшеты, менее 992 пикселей)
@media (max-width: 991.98px) {...}

// Большие устройства (рабочие столы, менее 1200 пикселей)
@media (max-width: 1199,98 пикселей) {...}

// Очень большие устройства (большие рабочие столы)
// Нет медиа-запроса, так как очень большая точка останова не имеет верхней границы по ширине

Обратите внимание, что, поскольку браузеры в настоящее время не поддерживают запросы контекста диапазона, мы обходим ограничения префиксов min- и max- и видовых экранов с дробной шириной (что может происходить при определенных условиях, например, на устройствах с высоким разрешением) за счет использования значений с более высокой точностью для этих сравнений.

Еще раз, эти медиа-запросы также доступны через миксины Sass:

  @include media-breakpoint-down (xs) {...}
@include media-breakpoint-down (sm) {...}
@include media-breakpoint-down (md) {...}
@include media-breakpoint-down (lg) {...}

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

  // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575.98px) {...}

// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) и (max-width: 767,98px) {...}

// Средние устройства (планшеты, 768 пикселей и выше)
@media (min-width: 768px) и (max-width: 991.98px) {...}

// Большие устройства (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) и (max-width: 1199.98px) {...}

// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) {...}

Эти медиа-запросы также доступны через миксины Sass:

  @include media-breakpoint-only (xs) {...}
@include media-breakpoint-only (sm) {...}
@include media-breakpoint-only (md) {...}
@include media-breakpoint-only (lg) {...}
@include media-breakpoint-only (xl) {...}

Точно так же медиа-запросы могут охватывать несколько значений ширины точки останова:

  // Пример
// Применяем стили, начиная со средних и заканчивая очень большими устройствами
@media (min-width: 768px) и (max-width: 1199.98px) {...}

Миксин Sass для таргетинга на тот же диапазон размеров экрана будет:

  @include media-breakpoint-between (md, xl) {...}

Z-индекс

Некоторые компоненты Bootstrap используют z-index , свойство CSS, которое помогает управлять макетом, предоставляя третью ось для упорядочивания содержимого. Мы используем шкалу z-индекса по умолчанию в Bootstrap, которая была разработана для правильного размещения элементов навигации, всплывающих и всплывающих подсказок, модальных окон и т. Д.

Эти более высокие значения начинаются с произвольного числа, достаточно большого и достаточно конкретного, чтобы в идеале избежать конфликтов. Нам нужен стандартный набор этих элементов для наших многоуровневых компонентов — всплывающих подсказок, всплывающих окон, панелей навигации, раскрывающихся списков, модальных окон — чтобы мы могли быть достаточно последовательными в поведении.Нет причин, по которым мы не могли использовать 100 + или 500 +.

Мы не поощряем настройку этих индивидуальных значений; если вы измените один, вам, вероятно, придется изменить их все.

  $ zindex-dropdown: 1000! По умолчанию;
$ zindex-sticky: 1020! по умолчанию;
$ zindex-fixed: 1030! по умолчанию;
$ zindex-modal-backdrop: 1040! по умолчанию;
$ zindex-modal: 1050! по умолчанию;
$ zindex-popover: 1060! по умолчанию;
$ zindex-tooltip: 1070! по умолчанию;

Для обработки перекрывающихся границ внутри компонентов (например,g., кнопки и входы в группах ввода), мы используем младшие одноразрядные значения z-index из 1 , 2 и 3 для состояний по умолчанию, при наведении курсора и активного состояния. При наведении / фокусе / активном мы выводим конкретный элемент на передний план с более высоким значением z-index , чтобы показать их границу над соседними элементами.

Разница между минимальной шириной и максимальной шириной в медиа-запросах CSS

При изучении медиа-запросов CSS иногда может возникнуть путаница, в чем разница между свойствами min-width и max-width .

Содержание страницы:

  1. Разница

    1. Подход с использованием мобильных устройств
    2. Ориентация на настольные ПК

  2. Точки останова

Разница

Короче говоря, основное различие между ними — это условие , , когда будут применяться стили:

  • @media (min-width: 800px) {…} — для ширины окна просмотра браузера, равной или шире 800 пикселей;
  • @media (max-width: 800px) {…} — для ширины области просмотра браузера, равной или меньшей 800 пикселей.

Если вы начинаете новый проект и должны выбирать между медиа-запросами min-width и max-width , это означает, что вы выбираете один из двух подходов:

  • Mobile-first;
  • Сначала настольные.

Подход с использованием мобильных устройств

Подход, ориентированный на мобильные устройства, означает, что вы проектируете / разрабатываете стиль для своего приложения, начиная с мобильного устройства и заканчивая настольным компьютером и даже телевизором. Для каждого следующего устройства точка останова указывается с помощью правила минимальной ширины медиа-запроса .

Подход, ориентированный на мобильные устройства, считается хорошей практикой, поскольку количество мобильных пользователей занимает более 50% рынка.

Подход, ориентированный на мобильные устройства

В следующем примере ширина контейнера будет составлять 100% в области просмотра от 0 до 768 пикселей. Все области просмотра выше 768 пикселей будут иметь ширину контейнера 80%, если вы не укажете это с помощью другого правила с более высоким значением ширины (точка останова).

Пример минимальной ширины :

  .container {
  ширина: 100%;
  отступ: 0 20 пикселей;
}

@media (min-width: 768 пикселей) {
  .container {
    ширина: 80%;
  }
}

Подход, ориентированный на настольные ПК

В отличие от подхода, ориентированного на мобильные устройства, для настольных компьютеров сначала вы применяете стили к большим окнам просмотра (например, к настольным компьютерам), а затем указываете правила для меньших окон просмотра.

Подход «сначала настольный»

В следующем примере ширина контейнера будет составлять 80% на всех окнах просмотра до 768 пикселей. Все области просмотра ниже 768 пикселей будут иметь ширину контейнера 100% и боковые отступы 20 пикселей.

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

Пример максимальной ширины :

  .container {
  ширина: 80%;
}

@media (max-width: 768 пикселей) {
  .container {
    ширина: 100%;
    отступ: 0 20 пикселей;
  }
}

Точки останова

Точки останова — это фиксированные значения различной ширины области просмотра. Указав макет правил медиазапросов, вы перейдете к , «прервав» в заданных точках.

Самые популярные значения точки останова согласно Bootstrap:

Имя Ширина
Мобильный портрет <576px
Мобильная лестница ≥576 пикселей
Планшетный портрет ≥768 пикселей
Таблетка Ladscape ≥992px
Ноутбук ≥1200 пикселей
Desktop и выше ≥1400 пикселей

Фреймворк Bootstrap имеет очень популярный и распространенный набор точек останова, соответствующих большинству различных устройств.Однако это не всегда так, вы можете указать собственную ширину в зависимости от вашего проекта. В freeCodeCamp есть хорошая статья об обработке точек останова.

максимальная ширина устройства против максимальной ширины? Какой мне использовать?

Я долго боролся с этим вопросом, а также какое-то время путал пиксель устройства с пикселем CSS. Я хотел бы поделиться своими выводами и надеюсь, что это кому-то поможет.

Здесь мы обсудим максимальную ширину.То же самое, естественно, касается min и height.

Разница

max-width — ширина целевой области отображения, например браузер; max-device-width — это ширина всей области рендеринга устройства, то есть фактического экрана устройства.

  • Если вы используете max-device-width , при изменении размера окна браузера на рабочем столе стиль CSS не изменится на другие настройки медиа-запроса;
  • Если вы используете max-width , при изменении размера браузера на рабочем столе CSS изменится на другие настройки медиа-запроса, и вам может быть показан стиль для мобильных устройств, например, сенсорные меню .

Какой использовать

С медиа-запросами CSS вы можете использовать max-device-width или max-width. Лично я предпочитаю максимальную ширину, так как она также придает рабочему столу отзывчивый вид. Единственный случай, когда я могу думать об использовании max-device-width, а не max-width, — это когда нам нужно сохранить что-то согласованное, даже когда размер окна браузера был изменен. Например, отзывчивый слайдер Menucool (Ninja Slider) позволяет использовать разные пиксели изображения для разных устройств, которые лучше всего подходят.Не ожидается переключения на изображение другого размера при изменении размера экрана, поскольку изображение уже загружено, поэтому ползунок использует подход ширины экрана (max-device-width).

Книжная или альбомная ориентация

Вы должны знать, что для некоторых устройств, таких как iPhone и iPad, max-device-width или max-width всегда соответствуют ширине устройства в портретном режиме (320 пикселей для iPhone, 768 пикселей для iPad), независимо от того, находится устройство в портретном режиме или нет.У других устройств его max-device-width или max-width изменяется в зависимости от его ориентации.

Если вы хотите зафиксировать ориентацию устройства и применить к нему определенные стили:

@media screen и (max-device-width: 640 пикселей) и (ориентация: альбомная) {
/ * здесь немного CSS * /
}

Не путайте пиксели устройства с пикселями CSS

Иногда можно услышать об устройстве разное разрешение экрана. Возьмем, к примеру, iPhone, разрешение 320×480 для iPhone 3, 640×960 для iPhone 4 и 640×1136 для iPhone 5.

Это связано с дисплеем Retina iPhone 4/5, который помещает два пикселя устройства в каждый пиксель CSS на экране.

Обычно вам не нужно беспокоиться о пикселе устройства. Поскольку в медиа-запросах CSS значение max-device-width или max-width основано на пикселе CSS, а не на пикселе устройства.

В очень редком случае, когда вы действительно хотите использовать разные стили для iPhone 3 и iPhone 4, вы можете:

/ * для iPhone 4 * /
@media screen и (max-width: 480px) и (-webkit-min-device-pixel-ratio: 2) {
……
}

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

Медиа-запрос

Медиа-запрос — это метод CSS, представленный в CSS3.

Он использует правило @media для включения блока свойств CSS, только если выполняется определенное условие.
Медиа-запросы позволяют нам создавать адаптивный дизайн веб-сайта (RWD), в котором определенные стили применяются к маленьким экранам, большим экранам и где угодно между ними.Синтаксис медиа-запроса позволяет создавать правила, которые могут применяться в зависимости от характеристик устройства.

Общий синтаксис медиа-запроса

@media (запрос) {


/ * Правила CSS, используемые при совпадении запроса * /


}

Хотя есть несколько различных элементов, по которым мы можем запросить, для адаптивного веб-дизайна наиболее часто используются min-width, max-width, min-height и max-height.

Давайте посмотрим на запросы, специфичные для устройства:

1.Мобильный

Для ноутбуков есть два разных разрешения.

  2. Экран только @media
  3. и (min-device-width: 320px)
  4. и (максимальная ширина устройства: 480 пикселей)
  5. {}

Обычно этот размер рекомендуется для мобильных устройств:

  2. Экран только @media
  3. и (минимальная ширина устройства: 360 пикселей)
  4. и (максимальная ширина устройства: 640 пикселей)
  5. {}

2.Ноутбук

Для ноутбуков есть два разных разрешения.

  2. Экран только @media
  3. и (min-device-width: 768px)
  4. и (максимальная ширина устройства: 1024 пикселя)
  5. {}
  2. Экран только @media
  3. и (минимальная ширина: 1030 пикселей)
  4. и (максимальная ширина: 1366 пикселей)
  5. {}

Обычно этот размер рекомендуется для ноутбуков

3.Рабочий стол

  1. Экран только @media
  2. и (минимальная ширина: 1370 пикселей)
  3. и (максимальная ширина: 1605 пикселей)
  4. {}

4. iPad

  3. Экран только @media
  4. и (ориентация: альбомная)
  5. и (-webkit-min-device-pixel-ratio: 1)
  6. и (min-device-width: 768px)
  7. и (max-device-width: 1007px)
  8. {}
  2. Экран только @media
  3. и (ориентация: книжная)
  4. и (-webkit-min-device-pixel-ratio: 1)
  5. и (min-device-width: 768px)
  6. и (max-device-width: 1007px)
  7. {}

Образец прилагаю.css в этой статье. Ребята, продолжайте исследовать. Если у вас есть какие-либо вопросы, пожалуйста, свяжитесь со мной.

Адаптивный адрес электронной почты | Ссылка на дизайн электронной почты

Адаптивный веб-дизайн, термин, впервые введенный Итаном Маркоттом, — это практика создания веб-сайтов таким образом, чтобы их можно было использовать независимо от того, какое устройство используется для доступа к ним.Адаптивный веб-сайт в значительной степени зависит от медиа-запросов. Совсем недавно этот подход был использован в электронной почте в формате HTML.

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

Обычно это таблица стилей внутри таблицы стилей, медиа-запросы состоят из нескольких частей:

 @media only screen and (max-width: 480px) {
}

Во-первых, они всегда открываются с помощью at-правила @media . Далее идет ключевое слово. В данном случае « только », что ограничивает отображение стилей медиа-запросов указанным типом медиа. После этого устанавливается « media type ».Наиболее часто используемые типы носителей - это screen и print , обеспечивающие различные правила стиля для дисплеев и принтеров соответственно. За ним следует еще одно ключевое слово « и » и, наконец, « медиа-функция », которая является основой медиа-запроса.

Доступно множество различных мультимедийных функций, но на самом деле нас интересуют только две из них:

  • макс. Ширина
  • максимальная ширина устройства

Разница между ними заключается в том, как они вычисляют максимальную ширину, при которой запускается медиа-запрос.Параметр max-width измеряется относительно доступного пространства браузера, а max-device-width учитывает размер экрана устройства. По сути, max-width покрывает все, а max-device-width покрывает небольшие дисплеи.

Мы хотим охватить все. В этом случае функция мультимедиа используется для нацеливания на область шириной 480 пикселей или меньше. 480 пикселей - это стандартная ширина экрана мобильного телефона в альбомной ориентации и хорошая стандартная точка останова для использования в вашем коде.

Медиа-запросы и встроенные стили

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

Поскольку встроенные стили имеют наивысшую специфичность в каскаде, необходимо, чтобы каждое написанное вами правило стиля медиа-запроса было помечено объявлением ! Important :

Вы можете оставить стили медиа-запросов в вашего электронного письма, поскольку клиенты, которые поддерживают медиа-запросы, не удаляют области или