Css media screen only one

Responsive Web Design — Media Queries

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Example

If the browser window is 600px or smaller, the background color will be lightblue:

Add a Breakpoint

Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen.

Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.

Desktop

Phone

Use a media query to add a breakpoint at 768px:

Example

When the screen (browser window) gets smaller than 768px, each column should have a width of 100%:

@media only screen and (max-width: 768px) /* For mobile phones: */
[class*=»col-«] width: 100%;
>
>

Always Design for Mobile First

Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).

This means that we must make some changes in our CSS.

Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First:

Example

/* For mobile phones: */
[class*=»col-«] width: 100%;
>

Another Breakpoint

You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.

Desktop

Tablet

Phone

We do this by adding one more media query (at 600px), and a set of new classes for devices larger than 600px (but smaller than 768px):

Example

Note that the two sets of classes are almost identical, the only difference is the name ( col- and col-s- ):

/* For mobile phones: */
[class*=»col-«] width: 100%;
>

It might seem odd that we have two sets of identical classes, but it gives us the opportunity in HTML, to decide what will happen with the columns at each breakpoint:

HTML Example

For desktop:

The first and the third section will both span 3 columns each. The middle section will span 6 columns.

For tablets:

The first section will span 3 columns, the second will span 9, and the third section will be displayed below the first two sections, and it will span 12 columns:

Typical Device Breakpoints

There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups:

Example

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px)

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px)

Orientation: Portrait / Landscape

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:

Example

The web page will have a lightblue background if the orientation is in landscape mode:

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different screen sizes:

Example

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) div.example display: none;
>
>

Change Font Size With Media Queries

You can also use media queries to change the font size of an element on different screen sizes:

Variable Font Size.

Example

/* If the screen size is 601px or more, set the font-size of

/* If the screen size is 600px or less, set the font-size of to 30px */
@media only screen and (max-width: 600px) div.example font-size: 30px;
>
>

CSS @media Reference

For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.

Источник

@media

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

Примечание: В JavaScript, at-правило @media может быть получено с помощью CSSMediaRule (en-US), интерфейса объектной модели CSS.

Синтаксис

At-правило @media можно разместить не только на верхнем уровне CSS, но и внутри любого фрагмента условной группы-правил.

/* На верхнем уровне кода */ @media screen and (min-width: 900px)  article  padding: 1rem 3rem; > > /* Вложено в другое условное at-правило */ @supports (display: flex)  @media screen and (min-width: 900px)  article  display: flex; > > > 

Для рассмотрения синтаксиса медиавыражений, см. Использование медиавыражений.

Формальный синтаксис

A is composed of a optional media type and/or a number of media features.

Типы

Подходит для всех устройств.

Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.

Предназначен в первую очередь для цветных компьютерных экранов.

Предназначен для синтезаторов речи.

Примечание: CSS2.1 и Media Queries 3 определили несколько дополнительных значений ( tty , tv , projection , handheld , braille , embossed , aural ), но они устарели в Media Queries 4 и не рекомендуется к использованию.

Media Features

Each media feature tests for one specific feature of the browser or device.

Имя	Summary	Notes
width (en-US)	Viewport width
height (en-US)	Viewport height
aspect-ratio (en-US)	Width-to-height aspect ratio of the viewport
orientation	Orientation of the viewport
resolution (en-US)	Pixel density of the output device
scan	Scanning process of the output device
grid (en-US)	Is the device a grid or bitmap?
update-frequency (en-US)	How quickly (if at all) can the output device modify the appearance of the content	Added in Media Queries Level 4
overflow-block (en-US)	How does the output device handle content that overflows the viewport along the block axis?	Added in Media Queries Level 4
overflow-inline (en-US)	Can content that overflows the viewport along the inline axis be scrolled?	Added in Media Queries Level 4
color (en-US)	Number of bits per color component of the output device, or zero if the device isn’t color.
color-index (en-US)	Number of entries in the output device’s color lookup table, or zero if the device does not use such a table.
display-mode (en-US)	The display mode of the application, as specified in the web app manifest’s display member.	Defined in the Web App Manifest spec.
monochrome (en-US)	Bits per pixel in the output device’s monochrome frame buffer, or 0 if the device is not monochrome.
inverted-colors	Is the user agent or underlying OS inverting colors?	Added in Media Queries Level 4
pointer (en-US)	Is the primary input mechanism a pointing device, and if so, how accurate is it?	Added in Media Queries Level 4
hover (en-US)	Does the primary input mechanism allow the user to hover over elements?	Added in Media Queries Level 4
any-pointer (en-US)	Is any available input mechanism a pointing device, and if so, how accurate is it?	Added in Media Queries Level 4
any-hover (en-US)	Does any available input mechanism allow the user to hover over elements?	Added in Media Queries Level 4
light-level	Current ambient light level	Added in Media Queries Level 4
scripting	Is scripting (e.g. JavaScript) available?	Added in Media Queries Level 4
device-width (en-US)	Width of the rendering surface of the output device	Deprecated in Media Queries Level 4
device-height (en-US)	Height of the rendering surface of the output device	Deprecated in Media Queries Level 4
device-aspect-ratio (en-US)	Width-to-height aspect ratio of the output device	Deprecated in Media Queries Level 4
-webkit-device-pixel-ratio (en-US) Non-standard	Number of physical device pixels per CSS pixel	Nonstandard; WebKit/Blink-specific. If possible, use the resolution (en-US) media feature instead.
-webkit-transform-3d (en-US) Non-standard	Are CSS 3D transform s supported?	Nonstandard; WebKit/Blink-specific
-webkit-transform-2d (en-US) Non-standard	Are CSS 2D transform s supported?	Nonstandard; WebKit-specific
-webkit-transition (en-US) Non-standard	Are CSS transition s supported?	Nonstandard; WebKit-specific
-webkit-animation (en-US) Non-standard	Are CSS animation s supported?	Nonstandard; WebKit-specific

Примеры

@media print  body  font-size: 10pt > > @media screen  body  font-size: 13px > > @media screen, print  body  line-height: 1.2 > > @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)  body  line-height: 1.4 > > 

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Источник