css媒体查询失效该如何解决
发布时间：2023-07-21 10:42:11 所属栏目：教程 来源：互联网
导读： 这篇文章主要介绍了css媒体查询失效如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css媒体查询失效如何解决文章都会有所收获，下面我们一起来
|
这篇文章主要介绍了css媒体查询失效如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css媒体查询失效如何解决文章都会有所收获，下面我们一起来看看吧。 css媒体查询失效的解决办法：1、修改语法如“@media screen and (max-width:768px){...}”；2、在html头文件添加必要的meta标签；3、将媒体查询语句放在原css文档后面即可。 CSS @media媒体查询无效 用@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> <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> 尝试三：优先级——将媒体查询语句放在原css文档后面 body{ padding-top:50px; padding-bottom:20px; } @media screen and (max-width:768px){ body { padding-top:150px; padding-bottom: 20px; } } （编辑：广西网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
