移动视图 CSS 中的空间间隙

【问题标题】：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
    }

【讨论】：