css3 @media不起作用的原因

发布时间:2020-11-19 10:20:13 作者:小新
来源:亿速云 阅读:791

这篇文章主要介绍css3 @media不起作用的原因,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

css3 media不起作用的原因:1、HTML meta标签中没有设置加viewport属性;2、样式冲突,@media查询代码的样式被后面的css所覆盖;3、格式书写出现错误,mediah语句的and后面必须有空格。

在网页制作中,利用@media screen实现网页布局的自适应,匹配不同访问设备。只需在CSS中添加@media screen属性,针对不同设备的宽度进行编写CCS样式,根据浏览器宽度判断判断样式文件并输出不同的宽度值。

但有时设置@media媒体查询后,发现不起作用,这是什么原因?怎么解决?下面本篇文章给大家介绍一下。

css3 @media不起作用的可能原因

不要慌呢,慢慢分析。

首先确认是不是css本身的问题,而不是媒体查询没有生效。例如:

div{display:flex;}/*那么div所有的display效果都将无法生效*/

第一种错误:格式书写错误,and后面必须有空格

例如下面代码:

@media screen and (max-width:500px){ }

第二种错误:样式冲突;@media查询代码的样式被后面的css所覆盖

注意:建议在书写css的过程中,@media查询带的css写在后面,以免这样避免被前面的css覆盖。

第三种错误:css本身出了问题导致css不生效

注意:这是一种很常见的错误,例如块元素浮动导致父级元素没有高度;此时给父元素加背景颜色发现没有生效,实际上是css导致的错误,而没有显示。

例如css选择的优先级也会导致对其中一种生效另外一种不生效,等等css错误导致的问题也非常多,就不一 一列举了。

第四种错误:meta属性viewport属性,这个虽然基本常识,应该也会有人漏掉。

<meta name="viewport" content="width=device-width, initial-scale=1" />

第五种错误:括号中的内容内容不能写结束符“;”,以及其它错误。

解决办法:

有很多解决方法,但是建议可以是用css排除法,使用css注释掉一部分;

当然浏览器也是一个很好的查看代码解决问题的方法。

@media screen and (max-width:200px){
/*这只是一个示例*/
}

以上是css3 @media不起作用的原因的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. CSS3两大实用属性介绍
  2. 前端开发中CSS3的相关知识

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3 @media

上一篇:php怎么转义mysql中的特殊字符

下一篇:jquery改变this指向的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》