問題描述

以前沒遇到過這種情況，viewport也設(shè)置了

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

其中一個媒體查詢css代碼如下：

@media screen and (max-width:62rem){.sidebar-col{ width: 100%; height: 24rem; .sidebar-social{margin-top: 1rem; }}}

用chrome調(diào)試的時候界面能響應(yīng)式，但用手機查看卻沒有效果。

補充：我覺的是兼容性問題了，我測試用了UC瀏覽器沒有出現(xiàn)效果，而使用QQ瀏覽器能正常顯示，具體哪里不兼容我凌亂了，求解答

問題解答

大神 這個問題解決了沒有 我現(xiàn)在也碰到這個坑了 跪求幫忙

你的括號沒對

@media screen and (max-width:62rem)這邊screen換成all，或其他適用于移動端的屬性值你去搜下，媒體查詢中screen這個屬性值

未經(jīng)驗證，我覺得是max-width:62rem的問題，使用rem作為media query的單位的情況，這還是我第一次見到。

很可能是62rem太大了。設(shè)置如上viewport后，大多數(shù)手機的豎屏寬度是小于500px的，而根元素font-size往往是16px，所以62rem = 62*16px=992px，也就是說這個媒體查詢在豎屏?xí)r總是有效。但lz可以試著橫屏，很可能會觸發(fā)此邊界值。

還有一個原因是手機瀏覽器對rem單位可能存在兼容性問題：http://caniuse.com/#search=rem，iOS5~5.1不支持rem和media query混用

@media screen and (max-width:62rem) 這里的rem改成px

你在pc模擬iPhone6，他給你的分辨率是375*667你在手機上瀏覽的尺寸，就需要在扣掉app的頭部底部。建議先js檢測 屏幕寬高

單位問題吧，media我也是第一次看到用rem呢

你加上前綴看看-webkit