【问题标题】:Why i'm losing the ability to scroll in mobile when i add css media queries为什么当我添加 css 媒体查询时我失去了在移动设备中滚动的能力
【发布时间】:2017-02-14 03:10:49
【问题描述】:

我的样式或媒体查询有问题吗?当我在手机里时,我失去了向下滚动的能力。这是我唯一的媒体查询

@media (max-width: 568px) {
    header {
        padding: 1em 0;
        position: fixed;
        .logo {
            width: 200px;
        }
        .main-nav {
            display: none;
         }
         #burger-icon {
            width: 27px;
            display: block;
         }
    }
    #section1 {
        height: 500px;
        text-align: center;
    }
    #section2 {
        .col-1 {
            width: 100%;
            text-align: center;
        }
        .col-2 {
            width: 100%;
            padding: 0;
            margin-left: 0;
            margin-top: 20px;
            display: block;
        }
    }
}

【问题讨论】:

  • 您需要更多上下文。你能链接这个网站吗?
  • 试试@media screen and (max-width: 568px)
  • dynamic-thurston.com 我试过了,但没用这里是网站的链接。
  • 您的容器溢出有问题。在 Firefox 中,我必须在侧面滚动条...

标签: css media-queries responsive


【解决方案1】:

试试这个

@media screen and (max-width: 568px) {
header {
    padding: 1em 0;
    position: fixed;
    .logo {
        width: 200px;
    }
    .main-nav {
        display: none;
     }
     #burger-icon {
        width: 27px;
        display: block;
     }
}
#section1 {
    height: 500px;
    text-align: center;
}
#section2 {
    .col-1 {
        width: 100%;
        text-align: center;
    }
    .col-2 {
        width: 100%;
        padding: 0;
        margin-left: 0;
        margin-top: 20px;
        display: block;
    }
}

【讨论】:

    【解决方案2】:

    我已修复它,这是我脚本上的 skrollr 声明,这是我自己的错误,感谢您提供的所有帮助,我认为 skrollr.js 存在移动问题。

    【讨论】:

      猜你喜欢
      • 2019-01-21
      • 2017-01-03
      • 2011-12-13
      • 1970-01-01
      • 1970-01-01
      • 2021-08-14
      相关资源
      最近更新 更多