【CSS】@media媒体查询无效

时间：2025-03-28 12:14:29

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

1.问题

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

2.解决

尝试一： 语法规范——‘and’ 和 ‘(’ 之间需要一个空格

@media screen and (max-width:768px){
    body {
      	padding-top:150px;
 	 	padding-bottom:	20px;
    }
}

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

<!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="/npm/bootstrap@3.3.7/dist/css/" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/">
  </head>

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

body{
 	 padding-top:50px;
 	 padding-bottom:20px;
}
@media screen and (max-width:768px){
    body {
      	padding-top:150px;
 	 	padding-bottom:	20px;
    }
}

相关文章