Home > Article > Web Front-end > Parsing the use of media query @media (with code demonstration)
Parsing the use of media query @media (with code demonstration)
- 藏色散人forward
- 2022-08-07 16:48:142929browse
What is media query
Media query allows us to set CSS styles for the device display based on its characteristics (such as viewport width, screen ratio, device orientation: landscape or portrait), media queries are determined by media A type and one or more conditional expressions that detect media characteristics. Media properties that can be detected in media queries are width , height , and color (etc.). Using media queries, you can customize the display effect for specific output devices without changing the page content.
1. Media query operation method
The actual operation is: start by asking the device (called an expression). If the expression result is true, the CSS in the media query is applied. If If the expression evaluates to false, the CSS within the media query will be ignored.
2. Media query syntax
@media screen and (max-width:600px) {
}3. Code demonstration 1qqq
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.row{
border: 1px solid red;
}
.col{
display: inline-block;
width: 100%;
height: 100px;
background-color: green;
}
/* <768px */
@media screen and (max-width:768px) {
.col{
width: 100%;
}
}
/* >=992 and */
@media screen and (min-width:992px){
.col{
width: 49%;
}
}
/* >=768px and <1200px */
@media screen and (min-width:768px) and (max-width:1200px){
.col{
width: 48%;
}
}
/* >=1200px */
@media screen and (min-width: 1200px) {
.col{
width: 33%;
}
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Rendering after reducing to 768px
Recommended learning: "web front-end"
The above is the detailed content of Parsing the use of media query @media (with code demonstration). For more information, please follow other related articles on the PHP Chinese website!