媒體查詢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; 
} 

}