【问题标题】:Space gap in mobile view CSS移动视图 CSS 中的空间间隙
【发布时间】:2014-01-09 17:25:13
【问题描述】:

我目前无法为移动设备设置 CSS 样式。当您在移动设备上查看该网站时,您会发现标题和导航之间存在很大差距。您可以在这里查看移动模拟器http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php?u=http://www.angelbeats.nu 有谁知道我该如何解决这个问题?我想消除这个差距,以便内容 div 可以向上移动

【问题讨论】:

  • #header 正在让height 270px 删除它或将其添加到媒体查询中
  • 如果我删除高度,那么桌面视图将不再看到标题图像

标签: css


【解决方案1】:

您必须在媒体查询#header 规则中覆盖您的身高

media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)"
    #header {
        background-image: url(http://transmog.net/cgi-bin/nph-mobilewebonastick-scroll.cgi/000000A/http/www.angelbeats.nu/wp-content/themes/angelbeats/images/mobile-header.jpg);
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
        width: 100%;
        height: 100px;// add this rule
    }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-04-11
    • 1970-01-01
    • 1970-01-01
    • 2018-05-23
    • 1970-01-01
    • 2018-12-14
    • 1970-01-01
    相关资源
    最近更新 更多