Max width min width media: CSS Media Min-Width & Max-Width Queries

Как настроить таргетинг на настольные компьютеры, планшеты и мобильные устройства с помощью Media Query?

< html >

       

< head >

     < title >Media Query title >

         

     < style >

           

         /* Media Query for Mobile Devices */

         @media (max-width: 480px) {

             body {

                 цвет фона: красный;

             }

         }

/ * Запрос средств массовой информации для таблеток с низким разрешением, iPad * /

@Media (Min-Width: 481px) и (максимум: 767px) {

999px) и (максимум: 767px)

             body {

                 background-color: желтый;

             }

         }

           

         /* Media Query for Tablets Ipads portrait mode */

         @media (min-width: 768px) and (max-width: 1024px){

             body {

                 цвет фона: синий;

            }

         }

90 0 07    

/ * Запрос средств массовой информации для ноутбуков и настольных компьютеров * /

@media (мин-ширина: 1025px) и (максимальная ширина: 1280px) {

.

                 background-color: зеленый;

}

}

/ * Запрос средств массовой информации для больших экранов * /

@Media (Min-WIDTH: 1281PX) {

Body {

FOUENHEL-COL-COLOR: White;

}

}

Стиль >

0008 голова >

   

< тело стиль = "- " >

     < h2 >GeeksforGeeks h2 >

     < h3 >Media Query h3 >

Body >

HTML >

Viewports и Media Weberies

в Intro To Programming We Weberies 0348 в Intro To Programming We We. . это гарантирует, что веб-сайты будут отлично выглядеть на всех размерах экрана.

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

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

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

Согласно документации Mozilla Developer Network по медиа-запросам:

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

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

Вот пример их в действии:

 Экран @media и (min-width:600px) {
  навигация {
    плыть налево;
    ширина: 25%;
  }
  раздел {
    поле слева: 25%;
  }
}
@media screen и (max-width:599px) {
  нав ли {
    дисплей: встроенный;
  }
}
 

Когда размер экрана составляет не менее 600 пикселей, активируется первый приведенный выше запрос, и наш пример макета будет выглядеть следующим образом. Обратите внимание, как размеры, положение и поля областей nav и section отражают стили, объявленные в первом запросе: придайте странице такой стиль:

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

Обзор медиа-запросов

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

Нижеследующее взято из урока

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

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

Давайте рассмотрим создание медиа-запросов... Мы создадим каталог проекта с именем медиа-запрос-практика . Внутри него нам понадобится файл .html с именем media-query-site.html и еще один каталог с именем css . В каталоге css мы создадим файл с именем styles.css .

Структура проекта должна выглядеть так:

 медиа-запрос-практика
  ├── CSS
  │   └── стили.css
  └── медиа-запрос-сайт.html
 

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

медиа-запрос-сайт. html

 
  
<голова> Медиа-запросы <тело>

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

<дел>

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

<дел>

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

И по мере того, как все больше и больше людей используют все больше и больше больше устройств для работы в Интернете, интеграция медиа-запросов в веб-сайты становится обычной и широко распространенной практикой!
<дел>

Вы начинаете видеть здесь возможности? Медиа-запросы — это круто!

Если мы загрузим наш файл media-query-site. html в браузере, в настоящее время он должен выглядеть так:

Базовая конструкция

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

Они начинаются с @media и содержат набор скобок и фигурных скобок:

стили.css

 @media () {
  }
 
  • @media сообщает браузеру, что это медиа-запрос.

  • Скобки в конечном итоге будут определять, когда следует применять CSS этого запроса. Мы вернемся к этому через мгновение.

  • В конечном итоге фигурные скобки будут содержать CSS, который будет применяться при выполнении условий.

Тип носителя

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

  • все : любые и все устройства.

  • печать : Относится к просмотру нашего сайта в режиме «предварительного просмотра». Например, если бы у нас был веб-сайт с темным фоном, который пользователи могли бы захотеть распечатать, мы могли бы использовать медиа-запрос print , удаляющий темный фон, чтобы сделать информацию нашего веб-сайта более разборчивой в печатном формате.

  • экран : Относится к цветным экранам.

  • речь : Относится к программам чтения с экрана, помогающим слабовидящим пользователям.

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

Мы можем добавить тип носителя к нашему запросу следующим образом:

styles.css

 @экран мультимедиа () {
}
 

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

Функции носителя

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

  • height : Описывает высоту области просмотра в пикселях. Он также может иметь префикс min или max . Мы можем сказать max-height , чтобы указать максимальную высоту, к которой должен применяться CSS медиа-запроса. Или min-height для определения минимальной высоты.

  • ширина : Описывает ширину области просмотра в пикселях. Как и высота , он также может иметь префикс min или max .

  • ориентация : Указывает, является ли область просмотра альбомной (ширина, чем высота) или портретной (высота, чем ширина).

  • Вы можете узнать о дополнительных, менее распространенных функциях в документации MDN по медиа-запросам.

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

.

styles.css

 Экран @media и (максимальная ширина: 768 пикселей) {
  }
 

Мы сделали здесь пару вещей:

  • Во-первых, мы добавляем слова и между нашим типом носителя screen и скобками, содержащими нашу новую функцию мультимедиа. При использовании обоих типов носителя и требуется мультимедийная функция.

  • Затем мы включаем max-width: 768px в скобки.

    • ширина - это наша мультимедийная функция.
    • Префикс max указывает, что CSS, который мы в конечном итоге включим в этот медиа-запрос, должен применяться только к окнам просмотра с максимальной шириной
      768px
      .
  • 768px просто относится к размеру (в пикселях), который мы хотели бы определить как максимальный. При определении размеров пикселей в CSS 9Требуется суффикс 0007 px .

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

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

Точка останова — это точка, когда условие медиа-запроса становится истинным. Например, наш медиа-запрос имеет максимальную ширину 768 пикселей, поэтому он будет применять свои стили только тогда, когда ширина окна просмотра меньше 768 пикселей. Таким образом, 768px является точкой останова, потому что это точка, когда запрос «активируется».

Правила CSS медиазапроса

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

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

styles. css

 Экран @media и (максимальная ширина: 768 пикселей) {
    тело {
        цвет фона: черный;
        белый цвет;
    }
}
 

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

Если мы обновим страницу, мы увидим, что она по-прежнему выглядит так же:

Однако медленно сужайте окно браузера. Когда он уже 768 пикселей, активируется медиа-запрос; наш фон становится черным, а наш текст становится белым!

Множественные мультимедийные запросы

Мы также можем использовать несколько медиа-запросов одновременно для обработки различных размеров области просмотра и типов медиа. Добавим еще один запрос:

styles.css

 Экран @media и (максимальная ширина: 768 пикселей) {
    тело {
      цвет фона: черный;
      белый цвет;
    }
  }
  Экран @media и (максимальная ширина: 480 пикселей) {
    тело {
      цвет фона: бирюзовый;
    }
  }
 

Если мы обновим нашу страницу, мы увидим, что она по-прежнему имеет белый фон, если ее ширина превышает 768 пикселей, и черный фон между 480 и 768 пикселями. Но благодаря нашему второму запросу наш фон теперь бирюзовый, если ширина сайта меньше 480 пикселей!

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

Иногда одновременно могут применяться несколько мультимедийных запросов. Например, если окно просмотра меньше 480 пикселей, оба медиа-запроса будут применяться, потому что размер меньше 480 пикселей меньше 9.0357 оба максимальное значение ширины 768 и максимальное значение 480.

Когда применяется несколько мультимедийных запросов, CSS последнего примененного запроса переопределяет CSS других запросов, если они содержат одни и те же селекторы и свойства. В приведенном выше примере background-color , определенный в первом медиа-запросе, переопределяется свойством background-color в нашем втором медиа-запросе, когда окно просмотра уже 480 пикселей.

Определение диапазонов области просмотра

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

Мы могли бы добавить функцию min-width к одному из наших существующих запросов следующим образом:

styles.css

 Экран @media и (максимальная ширина: 768 пикселей) и (минимальная ширина: 600 пикселей) {
    тело {
      цвет фона: черный;
      белый цвет;
    }
  }
  Экран @media и (максимальная ширина: 480 пикселей) {
    тело {
      цвет фона: бирюзовый;
    }
  }
 

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

Теперь наш сайт начинается с белого фона и без применения стилей:

Когда мы медленно уменьшаем ширину окна браузера, его фон становится черным, а текст становится белым при разрешении 768 пикселей:

Но теперь, когда его ширина меньше 600 пикселей (но ниже ширины 480 пикселей, которая активирует другой медиа-запрос), он снова становится белым:

Тем не менее, как только он достигает 480 пикселей или меньше, он все равно становится бирюзовым:

Больше CSS в медиа-запросах

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