CSS media queries and responsive design

How to use media queries in CSS to build responsive web pages

In this article, I will first introduce media types and media feature descriptors, and then I will explain media queries.

media type

The media type is used in media queries and @import statements, allowing us to determine which media to load a CSS file or a piece of CSS on.

We have the followingmedia type

  • allMeans all media
  • printUse when printing
  • screenUsed when the page is displayed on the screen
  • speechFor screen readers

screenIs the default value.

In the past, we had more devices of this type, but because they have proven to be not an effective way to determine the requirements of the device, most of them are deprecated.

We can use them in @import statements as follows:

@import url(myfile.css) screen;
@import url(myfile-print.css) print;

We can load CSS files on multiple media types separated by commas:

@import url(myfile.css) screen, print;

Same workslinkTags in HTML:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen" />
<link rel="stylesheet" type="text/css" href="another.css" media="screen, print" />

We are not limited tomediaAttributes and@importdeclaration. there are more

Media function descriptor

First, let’s introduceMedia feature descriptor. They are what we can add tomediaAttribute oflinkOr to@importDeclare to indicate more conditions regarding CSS loading.

The following is a list of them:

  • width
  • height
  • device-width
  • device-height
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • orientation
  • scan
  • grid

Each of them has a corresponding min- * and max- *, for example:

  • min-width,max-width
  • min-device-width,max-device-width

and many more.

Some of them accept length values, which can be expressed aspxorremOr any length value. Is such thatwidth,height,device-width,device-height.

E.g:

@import url(myfile.css) screen and (max-width: 800px);

Note that we have wrapped each block with a media feature descriptor in parentheses.

Some accept fixed values.orientation, Used to detect the direction of the device and acceptportraitorlandscape.

example:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" />

scan, Used to determine the screen type, acceptprogressive(For modern displays) orinterlace(Applicable to older CRT devices)

Some others want integers.

likecolorIt checks the number of bits of each color component used by the device. Very low-level, but you only need to know where it is used (e.g.grid,color-index,monochrome).

aspect-ratiowithdevice-aspect-ratioAccept the ratio value that represents the ratio of the width and height of the viewport, expressed as a score.

example:

@import url(myfile.css) screen and (aspect-ratio: 4/3);

resolutionRepresents the pixel density of the device, in terms ofResolution data typelikedpi.

example:

@import url(myfile.css) screen and (min-resolution: 100dpi);

Logical Operators

We can use merge rulesand:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" />

We can use commas to perform logical operations of the "or" type, which combines multiple media queries:

@import url(myfile.css) screen, print;

We can usenotNegative media query:

@import url(myfile.css) not screen;

important:notCan only be used to negate the entire media query, so it must be placed at the beginning of the query (or after the comma)

Media inquiries

All the above rules we have seen apply to @import orlinkHTML tags can also be applied within CSS.

You need to pack them in@media () {}Structure.

example:

@media screen and (max-width: 800px) {
  /* enter some CSS */
}

this isResponsive design.

Media queries can be very complicated. This example only applies CSS when the screen device is between 600 and 800 pixels wide and the orientation is landscape:

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
  /* enter some CSS */
}

Download mine for freeCSS Manual


More CSS tutorials: