CSS@media媒体查询无效


用@media媒体查询写的CSS样式无效

1.问题

用@media媒体查询写的CSS样式对html无效。

2.解决

尝试一： ‘and’ 和 ‘(’ 之间需要一个空格

1
2
3
4
5
6
@media screen and (max-width:768px){
    body {
        padding-top:150px;
        padding-bottom: 20px;
    }
}

尝试二：保证html头文件添加了必要的meta标签

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
  <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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/index.css">
  </head>

尝试三：将媒体查询语句放在原css文档后面

1
2
3
4
5
6
7
8
9
10
body{
     padding-top:50px;
     padding-bottom:20px;
}
@media screen and (max-width:768px){
    body {
        padding-top:150px;
        padding-bottom: 20px;
    }
}