Media query sizes css

Media queries

Adapt your designs to different screen sizes using CSS media queries.

Designers can adjust their designs to accommodate users. The clearest example of this is the form factor of a user’s device; its width, the device aspect ratio, and so on. Using media queries, designers can respond to these different form factors.

Media queries are initiated with the @media keyword (a CSS at-rule), and can be used for a variety of use cases.

Target different types of output #

Websites are often displayed on screens but CSS can also be used to style websites for other outputs too. You might want your web pages to look one way on a screen but different when printed out. Querying media types makes this possible.

In this example, the background color is set to grey. But if the page is printed, the background color should be transparent. This saves the user’s printer ink.

body  
color: black; 
background-color: grey;
>

@media print  
body  
background-color: transparent; 
>
>

You can use the @media at-rule in your stylesheet like that, or you can make a separate stylesheet and use the media attribute on a link element:

link rel="stylesheet" href="global.css">
link rel="stylesheet" href="print.css" media="print">

If you don’t specify any media type for your CSS, it will automatically have a media type value of all . These two blocks of CSS are equivalent:

body  
color: black; 
background-color: white;
>

@media all  
body  
color: black; 
background-color: white; 
>
>

These two lines of HTML are also equivalent:

link rel="stylesheet" href="global.css">

link rel="stylesheet" href="global.css" media="all">

Query conditions #

You can add conditions to media types. These are called media queries. The CSS is applied only if the media type matches and the condition is also true. These conditions are called media features.

This is the syntax for media queries:

You can use media queries on a link element if your styles are in a separate stylesheet:

link rel="stylesheet" href="specific.css" media="type and (feature)">

Let’s say you want to apply different styles depending on whether the browser window is in landscape mode (the viewport width is greater than its height) or portrait mode (the viewport height is greater than its width). There’s a media feature called orientation you can use to test that:

@media all and (orientation: landscape)  
// Styles for landscape mode.
>
@media all and (orientation: portrait)  
// Styles for portrait mode.
>

Or if you prefer to have separate stylesheets:

link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

In this case the media type is all . Because that’s the default value, you can leave it out if you want:

@media (orientation: landscape)  
// Styles for landscape mode.
>
@media (orientation: portrait)  
// Styles for portrait mode.
>

Or using separate stylesheets:

link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

While using separate stylesheets for different media types—like print —might be okay, it’s probably not a good idea to use a separate stylesheet for every media query. Use @media at-rules instead.

Adjust styles based on viewport size #

For responsive design, one of the most useful media features involves the dimensions of the browser viewport. To apply styles when the browser window is wider than a certain width, use min-width .

@media (min-width: 400px)  
// Styles for viewports wider than 400 pixels.
>

Use the max-width media feature to apply styles below a certain width:

@media (max-width: 400px)  
// Styles for viewports narrower than 400 pixels.
>

You can use any CSS length units in your media queries. If your content is mostly image-based, pixels might make the most sense. If your content is mostly text-based, it probably makes more sense to use a relative unit that’s based on text size, like em or ch :

@media (min-width: 25em)  
// Styles for viewports wider than 25em.
>

You can also combine media queries to apply more than one condition. Use the word and to combine your media queries:

@media (min-width: 50em) and (max-width: 60em)  
// Styles for viewports wider than 50em and narrower than 60em.
>

Choose breakpoints based on the content #

The point at which a media feature condition becomes true is called a breakpoint. It’s best to choose your breakpoints based on your content rather than popular device sizes, as those are subject to change with every technology release cycle.

In this example, 50em is the point at which the lines of text become uncomfortably long. So a breakpoint is created to make the interface more legible. Using the column-count property, the text is divided into two columns from that point on.

@media (min-width: 50em)  
article  
column-count: 2; 
>
>

Combinations #

You can use media queries based on the height of the viewport, not just the width. This could be useful for optimizing interface content «above the fold». In the previous example, if readers are using a wide but short browser window, they have to scroll down one column and then scroll back up to get to the top of the second column. It would be safer to only apply the columns when the viewport is both wide enough and tall enough.

You can combine media queries so that the styles only apply when all the conditions are true. In this example, the viewport must be at least 50em wide and 60em tall in order for the column styles to be applied. Those breakpoints were chosen based on the amount of content.

@media (min-width: 50em) and (min-height: 60em)  
article  
column-count: 2; 
>
>

These examples show how media queries can be used to adapt designs to the form factor of a user’s device, but these just scratch the surface of possibilities. Media queries can go far beyond width and height, accessing user preferences for accessibility features and theme colors. Using media queries to make layout adjustments is a great start to a responsive design, which builds on these features and more.

Media queries only exist for screen size?

Try again! Media queries for things like print, dark and light system preference, and many more.

Screens are the only place web content is consumed or displayed?

Try again! A website may be printed onto paper, crawled by search engine spiders, read aloud by screen reader technologies, or even read to users by bots via an assistant.

The default media type is?

screen none all some landscape

Try again! screen is not the default type.

Try again! none is not a valid media type.

Try again! some is not a valid media type.

Try again! landscape is not a valid media type.

What would you use to prevent the browser from scaling a design on mobile?

width: 100% font-size: 200% &LTmeta name=»viewport» content=»width=device-width, initial-scale=1″> Media Queries HTML5

Which media query applies when the browser window is above 720px .

@media (width: 720px) @media (max-width: 720px) @media (min-width: 720px) @media (clamp-width: 720px)

Try again! This media query is only when the browser window is equal to 720px .

Try again! This media query is for when the browser window is below 720px .

🎉 You can read this as the browser window is at least 720px .

Try again! clamp-width is not a valid media query feature condition.

Next and previous lessons

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.

Источник

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.

Источник