css媒体查询失效怎么办

css媒体查询失效的解决办法:1、修改语法如“@media screen and (max-width:768px){…}”;2、在html头文件添加必要的meta标签;3、将媒体查询语句放在原css文档后面即可。

css媒体查询失效怎么办

教程操作环境:Windows10系统、css3版、DELL G3电脑

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;     } }
登录后复制

推荐学习:《css视频教程》

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发