简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css3 - css媒体查询在chrome浏览器手机模拟器上调试成功，但手机上却不行的情况
PHP中文网
PHP中文网 2017-04-17 11:44:30
0
9
815

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

其中一个媒体查询css代码如下：

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

用chrome调试的时候界面能响应式，但用手机查看却没有效果。

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

PHP中文网
PHP中文网

认证高级PHP讲师

répondre à tous (9)

2018-01-25 09:59:55 9 plancher

Maître, ce problème a-t-il été résolu ? Je suis également confronté à ce piège, aidez-moi

.
Comme+0
Ajouter une réponse
    阿神
    阿神2017-04-17 11:46:30 8 plancher

    你的括号没对

    Comme+0
    Ajouter une réponse
      刘奇
      刘奇2017-04-17 11:46:30 7 plancher

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

      Comme+0
      Ajouter une réponse
        小葫芦
        小葫芦2017-04-17 11:46:30 6 plancher

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

        Comme+0
        Ajouter une réponse
          刘奇
          刘奇2017-04-17 11:46:30 5 plancher

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

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

          Comme+0
          Ajouter une réponse
            伊谢尔伦
            伊谢尔伦2017-04-17 11:46:30 4 plancher

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

            Comme+0
            Ajouter une réponse
              Peter_Zhu
              Peter_Zhu2017-04-17 11:46:30 3 plancher

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

              Comme+0
              Ajouter une réponse
                阿神
                阿神2017-04-17 11:46:30 2 plancher

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

                Comme+0
                Ajouter une réponse
                  阿神
                  阿神2017-04-17 11:46:30 1 plancher

                  你加上前缀看看-webkit

                  Comme+0
                  Ajouter une réponse
                    Sujets populaires
                    Plus>
                    Articles populaires
                    Tutoriels populaires
                    Plus>
                    Tutoriels associés
                    Recommandations populaires
                    Derniers cours
                    Derniers téléchargements
                    Plus>
                    effets Web
                    Code source du site Web
                    Matériel du site Web
                    Modèle frontal
                    À propos de nous Clause de non-responsabilité Sitemap
                    Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！