Parsing the use of media query @media (with code demonstration)
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
Tips for creating media queries using CSS Viewport units vh and vmin
Sep 13, 2023 am 11:18 AM
Tips for creating media queries using CSSViewport units vh and vmin With the popularity of mobile devices, responsive design has become an essential technology for modern web design. To adapt to different screen sizes, developers need to adjust layout and styles through media queries. In media queries, the most commonly used unit is pixels (px). However, CSS3 introduces a new window unit, vh and vmin, which can better adapt to different device sizes. This article will introduce how to use vh and v
What to do if css media query fails
Jan 28, 2023 pm 03:29 PM
Solution to css media query failure: 1. Modify the syntax such as "@media screen and (max-width:768px){...}"; 2. Add the necessary meta tags to the html header file; 3. Change the media query statement Just put it behind the original css document.
Guide to CSS responsive layout properties: media queries and min-width/max-width
Oct 20, 2023 pm 02:19 PM
Guide to CSS responsive layout properties: mediaqueries and min-width/max-width With the popularity of mobile devices, more and more users access websites through mobile phones and tablets. This requires the website to be able to adapt to different screen sizes and device types to provide a better user experience. CSS responsive layout is a solution that allows web content to automatically adapt to the layout and style on different devices. When implementing CSS responsive layout, we often use two important
The Complete Guide to CSS Media Queries (Media Qures)
Sep 29, 2022 pm 08:41 PM
This article takes you to learn CSS media queries (Media Quires), introduces the syntax definition of media queries in detail, learns the usage skills of media queries from three specific layout examples, and introduces some scss and css attribute knowledge.
Exploring CSS media query properties: @media and min-device-width/max-device-width
Oct 20, 2023 pm 07:18 PM
CSS media query property exploration: @media and min-device-width/max-device-width, specific code examples required Introduction: With the popularity of mobile devices, responsive design of websites has become more and more important. When implementing responsive design, CSS media query properties play a crucial role. This article will explore in depth the two media query attributes @media and min-device-width/max-device-width, and
Which units are suitable for implementing responsive layout?
Jan 27, 2024 am 09:39 AM
What units to choose for responsive layout? With the popularity of mobile devices and tablets, more and more people are using various devices to browse the web. In order to ensure that web pages have good readability and user experience on different devices, responsive layout has gradually become an important consideration in design and development. When implementing responsive layout, choosing the right units is very important. This article will analyze several common units to help readers choose the appropriate units to implement responsive layout. Pixel (px): Pixel is the most common unit of length and represents a
Parsing the use of media query @media (with code demonstration)
Aug 07, 2022 pm 04:48 PM
Media queries allow 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 consist of a media type and one or more conditional expressions that detect media characteristics. composition.
CSS width property optimization tips: max-width and min-width
Oct 24, 2023 am 11:36 AM
CSS width attribute optimization tips: max-width and min-width In web design and development, setting the width of an element is a common task. In order to make web pages present good results on screens of different sizes, we often use the max-width and min-width attributes to control the width of elements. This article will introduce how to use these two attributes to optimize the design of web pages, and give some specific code examples. Use max-width to control the maximum width of an element
