css3媒体查询怎么不生效呢？

asialong

代码如下，媒体查询内的代码不生效

1. div{
   
2.         display: flex;
   
3.         flex-direction: column;
   
4.         justify-content: flex-start;
   
5.         margin: 0;
   
6.         padding: 0;
   
7. }
   
8. 
   
9. .main-body{
   
10.         width: 100vw;
    
11.         height: 100vh;
    
12.         background: #464646 url("./images/bg.png");
    
13. }
    
14. 
    
15. .main-body-wrap{
    
16.         opacity: 0;
    
17. }
    
18. 
    
19. .main-body-wrap img{
    
20.         object-fit: contain ;
    
21.         width: 100%;
    
22.         height: 100%;
    
23. }
    
24. 
    
25. @media screen and (min-width:400px){
    
26.         .main-body-wrap{
    
27.                 justify-content: center;
    
28.         }
    
29.         .main-body-wrap img{
    
30.                 object-fit: contain;
    
31.                 width: 50%;
    
32.                 height: 50%;
    
33.         }
    
34. }

复制代码

asialong

当前窗口的宽度用jq弹出是690

liangyongfei

这个是css标准的
你可以先用标准的 HTML 页面 运行成功后， 在 w中也是一样的
http://www.runoob.com/cssref/css3-pr-mediaquery.html

可以F12 调试  切换浏览器屏幕宽度试试   源码中 dom元素  样式有没有生效

先把 自定义的  main-body-wrap  和 .main-body-wrap img 去掉 ，可能是冲突了吧！

css 基础知识 ，、自己动手测试研究下就行！

asialong

liangyongfei 发表于 2018-2-27 11:56
这个是css标准的
你可以先用标准的 HTML 页面 运行成功后， 在 w中也是一样的
http://www.runoob.com/cssre ...

一模一样的代码我放到html里运行正常，但是在eclips自带的chrome里就是不生效，很奇怪啊

asialong

liangyongfei 发表于 2018-2-27 11:56
这个是css标准的
你可以先用标准的 HTML 页面 运行成功后， 在 w中也是一样的
http://www.runoob.com/cssre ...

刚才仔细研究了媒体查询是生效的，但是媒体查询里的代码不生效，生效的是默认的

asialong

liangyongfei 发表于 2018-2-27 11:56
这个是css标准的
你可以先用标准的 HTML 页面 运行成功后， 在 w中也是一样的
http://www.runoob.com/cssre ...

解决了，要在媒体查询里!important 一下，才能生效