Css media queries are not just max-width

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Мультимедийные функции (Media Queries Level 4)

В «Media Queries Level 4» добавлены следующие новые функции, которые, возможно, будут реализованы в браузерах:

  • scripting (определяет используются ли языки сценариев, такие как JavaScript в текущем документе).
    Значения:

    • enabled (скрипты доступны в текущем документе).
    • initial-only (скрипты доступны только во время первоначальной загрузке страницы, а не после).
    • none (скрипты полностью недоступны в текущем документе).
  • pointer (используется для запроса о наличии и правильности указывающего устройства, такого как мышь. Если устройство имеет несколько механизмов ввода, то функция указателя должна отражать характеристики «первичного» механизма входного сигнала, который определяется браузером пользователя).
    Значения:

    • none (основной механизм ввода устройства не включает в себя указательное устройство).
    • coarse (основным механизмом ввода устройства входит указательное устройство ограниченной точности, например, сенсорные экраны и системы обнаружения движения по типу Kinect — периферийные устройства для Xbox).
    • fine (основной механизм ввода устройства включает в себя точное указывающее устройство, например, мыши, тачпады и устройства для рисования стилусом).
  • any-pointer (аналогичен pointer, но используется для запроса возможности любого доступного механизма ввода).
    Значения:
    none | coarse | fine
  • hover (используется для запроса на способность пользователя навести курсор на элемент на странице. Если устройство имеет несколько механизмов ввода, то функция должна отражать характеристики «первичного» механизма входного сигнала, который определяется браузером пользователя).
    Значения:

    • none (указывает, что основное указательное устроство не может навести курсор на элемент на странице, например, сенсорные экраны и экраны, которые используют для рисования стилусом).
    • hover (указывает, что основное указательное устроство может навести курсор на элемент на странице, например, мыши и устройства с физической точкой на экране, как контроллер Nintendo для Wii.).
  • any-hover (аналогичен hover, но используется для запроса возможности любого доступного механизма наведения).
    Значения:
    none | hover
  • color-gamut (описывает примерный диапазон цветов, которые поддерживаются UA и выходными устройствами).
    Значения:

    • srgb (выходное устройство может поддерживать примерно диапазон sRGB или более).
    • p3 (выходное устройство может поддерживать примерно диапазон, указанный DCIP3 цветового пространства или более).
    • rec2020 (выходное устройство может поддерживать примерно диапазон, указанный в ITU-R рекомендации BT.2020 цветового пространства или более).
  • update (функция средства обновления используется для запроса на способность устройства вывода изменить внешний вид содержимого после его рендеринга).
    Значения:

    • none (макет не может быть обновлен, например, для документов, напечатанных на бумаге).
    • slow (макет может динамически меняться в соответствии с обычными правилами CSS, но выходное устройство не в состоянии достаточно быстро отобразить изменения, чтобы восприниматься как плавная анимация, например: e-ink экраны).
    • fast (макет может динамически изменяться в соответствии с обычными правилами CSS и выходное устройство не ограничено в скорости, поэтому такие эффекты как CSS анимация могут быть использованы, например: экраны компьютера.).
  • overflow-block (определяет как выходные устройства обрабатывают содержимое, которое не помещается в область просмотра по оси блока)
    Значения:

    • none (любое переполнение контента просто не отображается, например, рекламные щиты).
    • scroll (позоляет пользователю прокрутить содержание, например, экраны компьютеров).
    • optional-paged (позволяет пользователям прокрутить переполненное содержимое, например, слайд-шоу).
    • paged (содержимое разделено на отдельные страницы, содержимое, выходящее за пределы одной страницы в оси блока отображается на следующей странице, например, принтеры или устройства для чтения).
  • overflow-inline (описывает поведение устройства, когда содержимое превышает начальный содержащий блок по inline оси.)
    Значения:

    • none (любое переполнение контента просто не отображается).
    • scroll (позоляет пользователю прокрутить содержание).

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

В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.

Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:

@media (min-width: 700px), (orientation: landscape) {}

Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:

@media not screen and (device-width: 800px) {}

Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.

/* Не работает в старых браузерах */
@media only screen and (min-width: 600px) {}

Медиазапросы, используемые в Bootstrap 4

В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width) используются в Bootstrap 4:

// Small devices (landscape phones, минимальная ширина области просмотра 576px и выше)
@media (min-width: 576px) { ...код CSS }

// Medium devices (tablets, минимальная ширина области просмотра 768px и выше)
@media (min-width: 768px) { ...код CSS }

// Large devices (desktops, минимальная ширина области просмотра 992px и выше)
@media (min-width: 992px) { ...код CSS }

// Extra large devices (large desktops, минимальная ширина области просмотра 1200px и выше)
@media (min-width: 1200px) { ...код CSS }

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width) используются в Bootstrap 4:

// Extra small devices (portrait phones, максимальная ширина области просмотра 576px и ниже)
@media (max-width: 575.98px) { ...код CSS }

// Small devices (landscape phones, максимальная ширина области просмотра 768px и ниже)
@media (max-width: 767.98px) { ...код CSS }

// Medium devices (tablets, максимальная ширина области просмотра 992px и ниже)
@media (max-width: 991.98px) { ...код CSS }

// Large devices (desktops, максимальная ширина области просмотра 1200px и ниже)
@media (max-width: 1199.98px) { ...код CSS }

В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width):

// Small devices (landscape phones, минимальная ширина области просмотра 576px и максимальная ширина области просмотра 768px)
@media (min-width: 576px) and (max-width: 767.98px) { ...код CSS }

// Medium devices (tablets, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 992px)
@media (min-width: 768px) and (max-width: 991.98px) { ...код CSS }

// Large devices (desktops, минимальная ширина области просмотра 992px и максимальная ширина области просмотра 1200px)
@media (min-width: 992px) and (max-width: 1199.98px) { ...код CSS }

Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and («И»), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра. Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

// Medium and Large devices (tablets and desktops, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 1200px)
@media (min-width: 768px) and (max-width: 1199.98px) { ...код CSS } 

Media Features

Value Description
any-hover Does any available input mechanism allow the user to hover over
elements? (added in Media Queries Level 4)
any-pointer Is any available input mechanism a pointing device, and if so, how
accurate is it? (added in Media Queries Level 4)
aspect-ratio The ratio between the width and the height of the viewport
color The number of bits per color component for the output device
color-gamut The approximate range of colors that are supported by the user agent and
output device (added in Media Queries Level 4)
color-index The number of colors the device can display
grid Whether the device is a grid or bitmap
height The viewport height
hover Does the primary input mechanism allow the user to hover over elements?
(added in Media Queries Level 4)
inverted-colors Is the browser or underlying OS inverting colors? (added in Media
Queries Level 4)
light-level Current ambient light level (added in Media Queries Level 4)
max-aspect-ratio The maximum ratio between the width and the height of the display area
max-color The maximum number of bits per color component for the output device
max-color-index The maximum number of colors the device can display
max-height The maximum height of the display area, such as a browser window
max-monochrome The maximum number of bits per «color» on a monochrome (greyscale) device
max-resolution The maximum resolution of the device, using dpi or dpcm
max-width The maximum width of the display area, such as a browser window
min-aspect-ratio The minimum ratio between the width and the height of the display area
min-color The minimum number of bits per color component for the output device
min-color-index The minimum number of colors the device can display
min-height The minimum height of the display area, such as a browser window
min-monochrome The minimum number of bits per «color» on a monochrome (greyscale) device
min-resolution The minimum resolution of the device, using dpi or dpcm
min-width The minimum width of the display area, such as a browser window
monochrome The number of bits per «color» on a monochrome (greyscale) device
orientation The orientation of the viewport (landscape or portrait mode)
overflow-block How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
overflow-inline Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
pointer Is the primary input mechanism a pointing device, and if so, how
accurate is it? (added in Media Queries Level 4)
resolution The resolution of the output device, using dpi or dpcm
scan The scanning process of the output device
scripting Is scripting (e.g. JavaScript) available? (added in Media Queries Level
4)
update How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
width The viewport width

Рапаны

Рапаны (лат. Rapana) — род хищных брюхоногих моллюсков из семейства Muricidae. Распространены в морях Тихого и Индийского океанов. С 1947 года встречается в Черном море. Длина раковины до 12-15 см. Раковина широкоовальной формы, завиток низкий, последний оборот вздут, серовато-коричневого цвета со спиральными рёбрами и осевыми утолщениями. Активные хищники, питающиеся двустворчатыми мелкими моллюсками, например, мидиями и устрицами, раковины которых они открывают при помощи своей сильной мускульной ноги. Молодые рапаны с помощью своего покрытого зубчиками языка-сверла делают отверстия в раковинах своих жертв и раскрывают их. Обитают на любых типах дна, передвигаясь с помощью мускулистой ноги.

Definition and Usage

The rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

Using media queries are a popular technique for delivering a tailored style
sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).

In addition to media types, there are also media features. Media features
provide more specific details to media queries, by allowing to test for a
specific feature of the user agent or display device. For example, you
can apply styles to only those screens that are greater, or smaller, than a
certain width.

Usage

const sortCSSmq = require('sort-css-media-queries');

// your cool code
// ...

postcss().process(css);

mobile-first

The plugin will sort your media-queries according to the mobile-first methodology. The sequence of media requests:

  1. and from smallest to largest,
  2. and from largest to smallest,
  3. and from smallest to largest,
  4. and from largest to smallest
  5. media queries without dimension values, for example ,
  6. at the end:

Example

Media-queries list:

// min-width/-height -> from smallest to largest
'screen and (min-width: 320px) and (max-width: 767px)',
'screen and (min-height: 480px)',
'screen and (min-height: 480px) and (min-width: 320px)',
'screen and (min-width: 640px)',
'screen and (min-width: 1024px)',
'screen and (min-width: 1280px)',

// device
'screen and (min-device-width: 320px) and (max-device-width: 767px)',

// max-width/-height 
'screen and (max-width: 1023px)',
'screen and (max-height: 767px) and (min-height: 320px)',
'screen and (max-width: 767px) and (min-width: 320px)',
'screen and (max-width: 639px)',

// no units
'screen and (orientation: landscape)',
'screen and (orientation: portrait)',
'print',
'tv'

Sort result:

'screen and (min-width: 320px) and (max-width: 767px)',
'screen and (min-height: 480px)',
'screen and (min-height: 480px) and (min-width: 320px)',
'screen and (min-width: 640px)',
'screen and (min-width: 1024px)',
'screen and (min-width: 1280px)',
'screen and (min-device-width: 320px) and (max-device-width: 767px)',
'screen and (max-width: 1023px)',
'screen and (max-height: 767px) and (min-height: 320px)',
'screen and (max-width: 767px) and (min-width: 320px)',
'screen and (max-width: 639px)',
'print',
'screen and (orientation: landscape)',
'screen and (orientation: portrait)',
'tv'

desktop-first

const sortCSSmq = require('sort-css-media-queries');

// your cool code
// ...

postcss().process(css);

The plugin will sort your media-queries according to the desktop-first methodology. The sequence of media requests:

  1. and from largest to smallest,
  2. and from largest to smallest
  3. and from smallest to largest,
  4. and from smallest to largest,
  5. media queries without dimension values, ,
  6. at the end:

Specificity (classes vs. IDs)

Elements that occur exactly once inside a page should use IDs, otherwise, use classes. When in doubt, use a class name.

  • Good candidates for IDs: header, footer, modal popups.
  • Bad candidates for IDs: navigation, item listings, item view pages (ex: issue view).

When styling a component, start with an element + class namespace (prefer class names over IDs), prefer direct descendant selectors by default, and use as little specificity as possible. Here is a good example:

CSS Specificity Guidelines

  • When building out a block, use the BEM selectors to separate different components. Here is an example:

  • If you must use an id selector () make sure that you have no more than one in your rule declaration. A rule like is considered harmful.

Типы устройств

Тип Описание
all Используется для всех типов устройств.
aural Используется для синтезаторов речи и звука.
braille Используется для тактильной обратной связи устройств Брайля.
embossed Используется для принтеров Брайля.
handheld Используется для небольших или портативных устройств.
print Используется для принтеров
projection Используется для презентаций, таких как слайды.
screen Используется для экранов компьютеров, планшетов, смартфонов и т.д.
speech Используется для речевых браузеров.
tty Используется для носителей, использующих сетки с фиксированным шагом символов, такие как телетайпы и терминалы.
tv Используется для телеэкранов.

К сожалению тип устройства дает слишком мало информации, поэтому редко используется по прямому назначению. Современные смартфоны и планшеты, ноутбуки и настольные компьютеры идентифицируют себя как тип screen. Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:

/* только для печати */
@media print {
  /* скрыть меню */
  #navigation { display: none; }

  /* начинать каждую новую страницу с заголовка h1 */
  h1 { page-break-before: always; }
}

Usage

Add PostCSS Custom Media to your project:

npm install postcss-custom-media --save-dev

Use PostCSS Custom Media to process your CSS:

const postcssCustomMedia = require('postcss-custom-media');

postcssCustomMedia.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssCustomMedia = require('postcss-custom-media');

postcss([
  postcssCustomMedia(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Custom Media runs in all Node environments, with special instructions for:

CSS Syntax

@media not|only mediatype and (mediafeature and|or|not
mediafeature)
{  CSS-Code;}

meaning of the not, only and and keywords:

not: The not keyword reverts the meaning of an entire media
query.

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

and: The and keyword combines a media feature with a media
type or other media features.

They are all optional. However, if you use not or
only, you must also specify a media type.

You can also have different stylesheets for different media, like
this:

….

Шпаргалка Media queries CSS

/* Smartphones (вертикальная и горизонтальная ориентация) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* стили */
}

/* Smartphones (горизонтальная) ----------- */
@media only screen and (min-width: 321px) {
/* стили */
}

/* Smartphones (вертикальная) ----------- */
@media only screen and (max-width: 320px) {
/* стили */
}

/* iPads (вертикальная и горизонтальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* стили */
}

/* iPads (горизонтальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* стили */
}

/* iPads (вертикальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* стили */
}

/* iPad 3**********/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}

/* Настольные компьютеры и ноутбуки ----------- */
@media only screen  and (min-width: 1224px) {
/* стили */
}

/* Большие экраны ----------- */
@media only screen  and (min-width: 1824px) {
/* стили */
}

/* iPhone 4 ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стили */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стили */
}
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стили */
}

More Examples

Example

Hide an element when the browser’s width is 600px wide or less:

@media screen and (max-width: 600px) {  div.example {    display:
none; 
}}

Example

Use mediaqueries to set the background-color to lavender if the viewport is
800 pixels wide or wider, to lightgreen if the viewport is between 400 and 799 pixels wide.
If the viewport is smaller than 400 pixels, the background-color is lightblue:

body {  background-color: lightblue;}@media screen and (min-width:
400px) {  body {   
background-color: lightgreen;  }}@media
screen and (min-width: 800px) {  body {   
background-color: lavender;  }}

Example

Create a responsive navigation menu (displayed horizontally on large screens and vertically on small screens):

@media screen and (max-width: 600px) {  .topnav a {   
float: none;    width: 100%; 
}}

Example

Use media queries to create a responsive column layout:

/* On screens that are 992px wide or less, go from four columns to two
columns */@media screen and (max-width: 992px) {  .column {   
width: 50%;  }}/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */@media screen and (max-width:
600px) {  .column {    width: 100%;
  }}

Example

Use media queries to create a responsive website:

Example

Media queries can also be used to change layout of a page depending on the
orientation of the browser. You can have a set of CSS properties that will only
apply when the browser window is wider than its height, a so called «Landscape»
orientation.

Use a lightblue background color if the orientation is in landscape mode:

@media only screen and (orientation:
landscape) {  body {
   
background-color: lightblue;  }}

Example

Use mediaqueries to set the text color to green when the document is
displayed on the screen, and to black when it is printed:

@media screen {  body {   
color: green;   }}@media print {  body {    color: black;
  }}

Example

Comma separated list: add an additional media query to an already existing one, using a comma (this will behave like an OR operator):

/* When the width is between 600px and 900px OR above 1100px — change the
appearance of */@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {  div.example {   
font-size: 50px;    padding: 50px;   
border: 8px solid black;    background: yellow; 
}}

Related Pages

CSS Tutorial: CSS Media Queries

CSS Tutorial: CSS Media Queries Examples

RWD Tutorial: Responsive Web Design with Media Queries

JavaScript Tutorial: The window.matchMedia() method

❮ Previous
Complete CSS Reference
Next ❯

Ссылка на основную публикацию