Introduce what is a media query

王林
Release: 2020-10-21 17:46:51
forward
3152 people have browsed it

Introduce what is a media query

What is the core of learning media query?

(Recommended tutorial: html video tutorial)

Realize the normal preview of the page under different devices [Judge the current device]

Media type

Divide different devices into different types

all (all devices)

print (printing device)

screen (computer screen, tablet, smartphone)

Media Features

Used to describe the characteristics of the device, such as width, height...

width The web page display area is completely equal to the set width

height The web page display area is completely equal to the set width Height

max-width / max-height The web page display area is less than or equal to the set width

min-width / min-width The web page display area is greater than or equal to the set width

orientation : portrait (portrait mode) | landscape (horizontal mode)

Syntax keyword

Purpose links media types and media characteristics together for device detection

and multiple media features can be linked together, which is equivalent to and

not excluding a media feature is equivalent to non, which can be omitted

only specifies a specific media Type, you can omit

Grammar

Outline syntax

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">
Copy after login
- 内嵌式语法
      @media only screen  and (max-width: 420px) {
      	body {
      		background-color: red;
      	}
      }
      
      备注: 多个条件联写
      @media only screen and (width: 320px) and (height: 568px) {}
Copy after login

Related recommendations:html tutorial

The above is the detailed content of Introduce what is a media query. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:juejin.im
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template