A brief introduction to CSS3 multimedia queries (code example)

The content of this article is a brief introduction (code example) about CSS3 multimedia query. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS2 Multimedia Query:

@media rules are introduced in css2. Different style rules can be customized for different media types (including monitors, portable devices, televisions, etc.).

CSS3 Multimedia Query:

CSS3 multimedia query inherits all the ideas of CSS2 multimedia types, replacing the type of search device, and CSS3 adaptive display according to the settings.

Multimedia queries can check many things: viewport width and height, device width and height, orientation, resolution.

Query syntax:

@media  not|only|all    mediatype and (expressions){
　　　　css-sode;
　　}

not: exclude certain types of devices, only: only certain types of devices, all: all devices.

You can use different style files on different media:

<link rel="stylesheet" media=" mediatype and|only|all (expressions)" href="print.css"/>

Media type:

all All media

print Printer

screen Computer, tablet, mobile phone

speech Screen reader

Media function:

device-width/height: device screen visible width/height

height, width: the height and width of the visible area of ​​the page

max-device-width/height: the maximum visible width and height of the screen.

CSS3 multimedia query example:

The above is the detailed content of A brief introduction to CSS3 multimedia queries (code example). For more information, please follow other related articles on the PHP Chinese website!