Media css min width max width: html — How to set @media (min-width) and (max-width) for both chrome and firefox

Использование медиавыражений — CSS | MDN

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

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

Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:

@media screen, print { .  .. }

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

Media features описывают некие характеристики определённого user agent, устройства вывода или окружения. Например, вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь)  будет расположено над элементами:

@media (hover: hover) { ... }

Многие медиавыражения представляют собой функцию диапазона и имеют префиксы «min-» или «max-«. Минимальное значение и максимальное значение условия, соответственно. Например этот CSS-код применяется только если ширина viewport меньше или равна 12450px:

@media (max-width: 12450px) { ... }

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

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

@media speech and (aspect-ratio: 11/5) { ... }

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

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

В прошлом примере мы видели, как применяется оператор and для группировки type и функции. Оператор and также может комбинировать несколько функций в одно медиавыражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Оператор only работает тогда, когда применяется всё выражение, не позволяя старым браузерам применять стили.

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

@media (min-width: 30em) and (orientation: landscape) { ... }

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

@media screen and (min-width: 30em) and (orientation: landscape) { . ..  }

comma-separated lists

You can use a comma-separated list to apply styles when the user’s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user’s device has either a minimum height of 680px or is a screen device in portrait mode:

@media (min-height: 680px), screen and (orientation: portrait) { ... }

Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries. ) The not keyword can’t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

@media not all and (monochrome) { ... }

… so that the above query is evaluated like this:

@media not (all and (monochrome)) { ... }

… rather than like this:

@media (not all) and (monochrome) { ... }

As another example, the following media query:

@media not screen and (color), print and (color) { ... }

… is evaluated like this:

@media (not (screen and (color))), print and (color) { ... }

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

<link rel="stylesheet" media="only screen and (color)" href="modern-styles. css" />

Max-width, max-height, min-width, min-height — учебник CSS

Несколько уроков назад мы рассматривали свойства width

Свойства min-width/min-height и max-width/max-height позволяют задавать минимальную и максимальную ширину/высоту соответственно. Разберем их по порядку:

• min-width — с помощью этого свойства вы можете указать минимальную ширину элемента. Например, если вы зададите блоку стиль min-width: 50px, то ширина блока может стать больше, но она никогда не станет меньше, чем 50 пикселей. Это очень удобно, например, при создании адаптивной верстки, когда при определенных размерах экрана элемент с относительной шириной становится слишком узким. Свойство min-width позволяет предотвратить такие искажения.
• min-height — работает аналогично предыдущему свойству, но только по отношению к высоте элемента.
  Безусловно, это тоже очень полезное свойство в практике, которое позволяет задать минимальную высоту элемента.
• max-width — как вы уже догадались, это свойство позволяет задать максимально допустимую ширину элемента. Например, элемент со стилем max-width: 960px может иметь ширину меньше максимальной, но он никогда не станет больше, чем 960 пикселей. Данное свойство удобно использовать при создании адаптивной разметки, когда вам необходимо, чтобы элемент адаптировался под ширину экрана любого устройства, но при этом не слишком широко разъезжался на больших экранах.
• max-height — работает аналогично предыдущему свойству, только по отношению к высоте. Но, как мы уже говорили ранее, лучше не играть с ограничением высоты элемента без крайней надобности.
• auto — это значение можно использовать для отмены действия свойства.

Итак, все эти свойства позволяют легко контролировать допустимые размеры элементов, при этом не фиксируя их намертво, как это делают обычные свойства width и height. Их можно комбинировать, задавая для одного элемента минимальную и максимальную ширину/высоту. Значения можно устанавливать в любых единицах измерения CSS. Словом, все возможности для реализации очень гибкой верстки.

div {
	width: 100%;
	min-width: 100px;
	max-width: 600px;
}

Что с кроссбраузерностью?

Поддержка браузерами свойств max-width, max-height, min-width, min-height практически стопроцентная. Данную запись не понимает только Internet Explorer 6.

Далее в учебнике: «плавающие» элементы и свойство float.

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. Тип носителя

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

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

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

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

grid

—>

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 css – Тарифы на сотовую связь

49 пользователя считают данную страницу полезной.

Информация актуальна! Страница была обновлена 16.12.2019

Мне часто задают вопросы вроде: « Стоит ли использовать медиа-запросы (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 » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

Синтаксис

min-width: значение | проценты | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования min-width в браузере

Объектная модель

[window.]document.getElementBy >elementID «).style.minWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

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

@media (условия) {
  /* CSS-код, который будет выполнен для данного условия */
}

<style>
  @media (orientation: landscape) {
    /* При горизонтальной ориентации фоновым цветом сайта будет белый */
    body {
      background: #FFF;
    }
  }

  @media (orientation: portrait) {
    /* При вертикальной ориентации фоновым цветом сайта будет чёрный */
    body {
      background: #000;
    }
  }
</style>

<style>
  /* Здесь будут все стили для устройств с viewport больше 1400 пикселей. */

  @media (max-width: 1400px) {
    /* Стили для устройств, у которых ширина viewport меньше 1400 пикселей, но больше 990 пикселей. Эти стили будут использованы для планшетов и ноутбуков с низким разрешением */
  }

  @media (max-width: 990px) {
    /* Стили для устройств, у которых ширина viewport меньше 990 пикселей, но больше 770 пикселей. Эти стили подойдут для некоторых мобильных устройств и планшетов */
  }

  @media (max-width: 770px) {
    /* Стили для устройств, у которых ширина viewport меньше 770 пикселей. Это множество мобильных устройств */
  }
</style>

<style>
  /* Здесь будут все стили для мобильных устройств с viewport меньше 770 пикселей. */

  @media (min-width: 770px) {
    /* Стили для устройств, у которых ширина viewport больше 770 пикселей. */
  }

  @media (min-width: 990px) {
    /* Стили для устройств, у которых ширина viewport больше 990 пикселей, но меньше 1400 пикселей. */
  }

  @media (min-width: 1400px) {
    /* Стили для устройств, у которых ширина viewport больше 1400 пикселей */
  }
</style>

<style>
  @media (orientation: portrait) and (min-width: 600px) {
    .container {
      /* Для устройств с портретной ориентацией и шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

<style>
  @media (orientation: portrait), (min-width: 600px) {
    .container {
      /* Для устройств с портретной ориентацией ИЛИ шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

<style>
  @media not all and (orientation: landscape) {
    .container {
      /* Для устройств с портретной ориентацией (условие выглядит как «НЕ горизонтальная») сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Подключение CSS файлов</title>

    <!-- Общие стили для проекта -->
    <link rel="stylesheet" href="style.css">

    <!-- Стили для экранов с viewport не менее 750px -->
    <link rel="stylesheet" media="screen and (min-width: 750px)" href="style750px.css">

</head>
<body>
    <!-- Разметка проекта -->
</body>
</html>

.menu {display: block;}

@media (max-width: 600px) {
   .menu {display: none;}
}

.menu {display: block;}

@media (max-width: 800px) {
   .menu {display: inline-block;}
}

@media (max-width: 600px) {
   .menu {display: none;}
}

@media (min-width: 600px) { }

@media (min-width: 600px) and (max-width: 800px){ }

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-desktop-up {
    padding: 20px;
  }
}

@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop-up {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop-up {
    @media (min-width: 1800px) { @content; }
  }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-size(desktop-up) {
    padding: 20px;
  }
}

@mixin for-size($range) {
  $phone-upper-boundary: 600px;
  $tablet-portrait-upper-boundary: 900px;
  $tablet-landscape-upper-boundary: 1200px;
  $desktop-upper-boundary: 1800px;

  @if $range == phone-only {
    @media (max-width: #{$phone-upper-boundary - 1}) { @content; }
  } @else if $range == tablet-portrait-up {
    @media (min-width: $phone-upper-boundary) { @content; }
  } @else if $range == tablet-landscape-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == desktop-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == big-desktop-up {
    @media (min-width: $desktop-upper-boundary) { @content; }
  }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-size(desktop-up) {
    padding: 20px;
  }
}

  @media only screen and (max-width: 576px) {
    // сделай что-нибудь
}

@media only screen и (min-width: 576px) {
    // делаем что-то еще раз
}  

  @media only screen and (min-width: 576px) {
    // применяем здесь стили, начиная с минимальной ширины
    // 576 пикселей (устройства среднего размера)
}  

  @media only screen and (min-width: 360px) and (max-width: 768px) {
// делаем что-нибудь в этом диапазоне ширины.
}  

  

  
    
    
  
  
    

      

         
 Первое окно 
 
        

Информация в первом поле
        
      
      

         
 Вторая коробка 
 
        

          Информация во втором поле
        
      
 

  

  .container {
  дисплей: гибкий;
  flex-wrap: обертка;
  ширина: 980 пикселей;
  маржа: 0 авто;
  маржа сверху: 40 пикселей;
}

@media only screen и (min-width: 320px) и (max-width: 576px) {
  .container {
    ширина: 100%;
    отступ слева: 23px;
    flex-direction: обратный столбец;
  }
  .boxes {
    ширина: 100%;
  }
}  

  @media (min-width: 576px) {
...
...
Обычный CSS
...
...
}  

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

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

  @media (min-width: 576px) и (max-width: 768px) {...}  

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

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

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

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

 
// Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (max-width: 575,98 пикселей) {...}

// Маленькие устройства (телефоны с горизонтальной ориентацией, 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: 1200 пикселей) {...}
  

  / * Смартфоны (портрет и пейзаж) ---------- * /
@media screen и (min-width: 320px) и (max-width: 480px) {
    / * стили * /
}
/ * Смартфоны (портрет) ---------- * /
@media screen и (max-width: 320px) {
    / * стили * /
}
/ * Смартфоны (альбомная ориентация) ---------- * /
@media screen и (min-width: 321px) {
    / * стили * /
}
/ * Планшеты, iPad (книжная и альбомная ориентация) ---------- * /
@media screen и (min-width: 768px) и (max-width: 1024px) {
    / * стили * /
}
/ * Планшеты, iPad (портрет) ---------- * /
@media screen и (min-width: 768px) {
    / * стили * /
}
/ * Планшеты, iPad (альбомная ориентация) ---------- * /
@media screen и (min-width: 1024px) {
    / * стили * /
}
/ * Настольные компьютеры и ноутбуки ---------- * /
@media screen и (min-width: 1224px) {
    / * стили * /
}
/ * Большие экраны ---------- * /
@media screen и (min-width: 1824px) {
    / * стили * /
}  

  .container {
    маржа: 0 авто;
    фон: # f2f2f2;
    размер коробки: рамка-рамка;
}
/ * Мобильные телефоны (портрет и пейзаж) ---------- * /
@media screen и (max-width: 767px) {
    .container {
        ширина: 100%;
        отступ: 0 10 пикселей;
    }
}
/ * Планшеты и iPad (книжная и альбомная ориентация) ---------- * /
@media screen и (min-width: 768px) и (max-width: 1023px) {
    .container {
        ширина: 750 пикселей;
        отступ: 0 10 пикселей;
    }
}
/ * Настольные компьютеры и ноутбуки с низким разрешением ---------- * /
@media screen и (min-width: 1024px) {
    .container {
        ширина: 980 пикселей;
        отступ: 0 15 пикселей;
    }
}
/ * Настольные компьютеры и ноутбуки с высоким разрешением ---------- * /
@media screen и (min-width: 1280 пикселей) {
    .container {
        ширина: 1200 пикселей;
        отступ: 0 20 пикселей;
    }
}  

  .column {
    ширина: 48%;
    отступ: 0 15 пикселей;
    размер коробки: рамка-рамка;
    фон: # 93dcff;
    плыть налево;
}
.container .column: first-child {
    маржа-право: 4%;
}
@media screen и (max-width: 767px) {
    .столбец {
        ширина: 100%;
        отступ: 5 пикселей 20 пикселей;
        float: нет;
    }
    .container .column: first-child {
        маржа справа: 0;
        нижнее поле: 20 пикселей;
    }
}  

  

  
    
    
    
    <стиль>

    
  
  
    
  
  

  п {
  размер шрифта: 20 пикселей;
}

@media (max-width: 1000 пикселей) {
  п {
    размер шрифта: 14 пикселей;
  }
}  

  @media only screen and (max-width: 900px) {
  .содержание {
    ширина: 80%;
  }
}

@media only print and (max-width: 900px) {
  .содержание {
    ширина: 100%;
  }
}  

 .container {
  ширина: 90%;
  маржа: 0 авто;
  черный цвет;
}
@media (min-width: 600 пикселей) {
  .container {
    ширина: 500 пикселей;
    цвет: зеленый;
  }
}
@media (min-width: 900 пикселей) {
  .container {
    ширина: 840 пикселей;
    цвет: желтый;
  }
}
@media (min-width: 1200 пикселей) {
  .container {
    ширина: 1120 пикселей;
    красный цвет;
  }
}
@media (min-width: 1500 пикселей) {
  .container {
    ширина: 1360 пикселей;
    цвет синий;
  }
}  

 .container {
  ширина: 1000 пикселей;
  маржа: 0 авто;
  черный цвет;
}
@media (max-width: 1200 пикселей) {
  .container {
    ширина: 840 пикселей;
    цвет: зеленый;
  }
}
@media (max-width: 900 пикселей) {
  .container {
    ширина: 600 пикселей;
    цвет: желтый;
  }
}
@media (max-width: 600 пикселей) {
  .container {
    ширина: 90%;
    красный цвет;
  }
}
@media (min-width: 1500 пикселей) {
  .container {
    ширина: 1360 пикселей;
    цвет синий;
  }
}  

  .responsive-img {
  ширина: 800 пикселей;
  высота: 450 пикселей;
}
@media (max-width: 1200 пикселей) {
  .responsive-img {
    ширина: 80вв;
    высота: 45vw;
  }
}  

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

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

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

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