时间戳

首页 > 解决方案 > 为什么我的移动版页面有空白空间？

css - 为什么我的移动版页面有空白空间？

问题描述

我正在努力做到这一点，以便当视口切换到移动设备时，我的桌面网站的边距消失。到目前为止，我的媒体查询看起来像这样：
@media screen and (max-width: 500px) { body { margin: 0; } .header { width: 100%; } } 我正在使用 LESS，如果这有所作为的话。

编辑：标题代码如下所示：

    .header {
    background-color: @dark-red;
    display: flex;
    flex-direction: column;
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 2%;
    padding-bottom: 2%;

    .logo {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    h2 {
        display: flex;
        color: @offwhite;
        justify-content: center;
        font-family: 'Kulim Park', sans-serif;
        font-size: 1.8rem;
    }
}

标签： cssresponsive-designlessmedia-queries

解决方案

您可能想尝试明确设置页面上各种元素的边距和填充，这样浏览器的默认值就不会让您感到痛苦。

请参阅下面 CSS 的最后几行。

现场示例：https ://codepen.io/panchroma/pen/BayxRLm

CSS 

.header {
    background-color: red;
    display: flex;
    flex-direction: column;
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 2%;
    padding-bottom: 2%;
}

    .header .logo {
        display: flex;
        justify-content: center;
        width: 100%;
    }

.header h2 {
        display: flex;
        color: white;
        justify-content: center;
        font-family: 'Kulim Park', sans-serif;
        font-size: 1.8rem;
    }


@media screen and (max-width: 500px) {
    body {
    margin: 0;
    }
    .header {
    width: 100%;
    }

    .header,
    .logo,
    h2{
     margin:0;  /* new */
    padding:0;  /* new */
  }
}

祝你好运！

推荐阅读