媒体查询css在Safari浏览器中工作但在Chrome中失败

Question

@media only screen and(max-width: 1132px) { 
#yc-contact{ 
    margin-left: 50px; 
      } 
} 

@media screen and(max-width: 1132px) { 
#yc-contact{ 
    margin-left: 50px; 
      } 
} 

上述代码在Safari中运行，但无法在Chrome中运行。试了两个。

Answer 1

请使用这个代码：

/* -----------非Retina屏幕-------- --- */

@media screen 
    and (max-device-width: 1132px) 
    and (-webkit-max-device-pixel-ratio: 1) 
    { 
    #yc-contact{margin-left: 50px;}  
    } 

/* -----------视网膜屏幕----------- */

@media screen 
    and (max-device-width: 1132px) 
    and (-webkit-max-device-pixel-ratio: 2) 
    and (max-resolution: 192dpi) 
    { 
    #yc-contact{margin-left: 50px;} 
    } 

Answer 2

这似乎是一个语法错误。尝试把一个空格后 “和”

@media only screen and (max-width: 1132px) { 
#yc-contact{ 
    margin-left: 50px; 
} 

}