css媒体查询在chrome浏览器手机模拟器上调试成功，但手机上却不行的情况

Question

以前没遇到过这种情况，viewport也设置了

<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调试的时候界面能响应式，但用手机查看却没有效果。

补充：我觉的是兼容性问题了，我测试用了UC浏览器没有出现效果，而使用QQ浏览器能正常显示，具体哪里不兼容我凌乱了，求解答

Answer 1

你的括号没对

Answer 2

@media screen and (max-width:62rem)这边screen换成all，或其他适用于移动端的属性值
你去搜下，媒体查询中screen这个属性值

Answer 3

未经验证，我觉得是max-width:62rem的问题，使用rem作为media query的单位的情况，这还是我第一次见到。

Answer 4

很可能是62rem太大了。
设置如上viewport后，大多数手机的竖屏宽度是小于500px的，而根元素font-size往往是16px，所以62rem = 62*16px=992px，也就是说这个媒体查询在竖屏时总是有效。
但lz可以试着横屏，很可能会触发此边界值。

还有一个原因是手机浏览器对rem单位可能存在兼容性问题：http://caniuse.com/#search=rem，iOS5~5.1不支持rem和media query混用

Answer 5

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

Answer 6

你在pc模拟iPhone6，他给你的分辨率是375*667
你在手机上浏览的尺寸，就需要在扣掉app的头部底部。
建议先js检测 屏幕宽高

Answer 7

单位问题吧，media我也是第一次看到用rem呢

Answer 8

你加上前缀看看-webkit

Answer 9

这个坑我知道，媒体查询的优先级是比较高的，此时rem的相对的不是你设置的根元素的font-size，而是浏览器的默认值，即16px。