Solution to invalid css media query: 1. Modify the syntax such as "@media screen and (max-width:768px){...}"; 2. Add the necessary meta tags to the html header file; 3. Place the media query statement after the original css document.
The operating environment of this tutorial: Windows 10 system, css3 version, DELL G3 computer
What should I do if the css media query fails?
CSS @media media query is invalid
The CSS style written with @media media query is invalid?
1. Problem
The CSS style written with @media media query is invalid for html.
2. Solution
Attempt 1: Grammar specification - a space is required between 'and' and '('
@media screen and (max-width:768px){
body {
padding-top:150px;
padding-bottom: 20px;
}
}Attempt 2: Environment - ensure html header The necessary meta tags are added to the file
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>Try three: Priority - put the media query statement after the original css document
body{
padding-top:50px;
padding-bottom:20px;
}
@media screen and (max-width:768px){
body {
padding-top:150px;
padding-bottom: 20px;
}
}Recommended learning: "css video tutorial 》
The above is the detailed content of What to do if css media query fails. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
