Question

我正在学习响应式设计的基础知识，并从头开始。我想要一个非常简单的页面，两侧没有边距。然而在iPhone上，该网站仍然有一个相当大的白色边缘左右。这是我到目前为止的CSS：

    div#header_image img{
        max-width:100%;
    }
    div#chart img{
        max-width:100%;
    }
    div#Chart_place{
        margin-bottom:2em;

    }

    @media screen and (min-width: 800px) {
        div#container{
            width:800px;
            margin: 0 auto;
        }
    }

    @media screen and (max-width: 800px) {
        div#container{
            width:max-width;
            margin: 0;
            padding: 0;
        }   
    }

    body{
        font-family:Verdana, Geneva, sans-serif;
        margin:0;

    }
    h1{
        font-size: 1.5em;
        margin-top:2em;
        margin-bottom:2em;
    }
     ul{background-color:white;}
     div#Feesboek_button{
    }
    input[type='text'], textarea {font-size:16px;}

我做错了什么？

Answer 1

编辑/更新：由于我之前的回答不是您要找的地方，请使用此功能：

html,body { margin:0; padding: 0; }

#container {
  max-width: 800px;
  padding: 0;
  margin: 0 auto;

  /*for ilustration purposes*/
  background-color: #f13700;
}

@media (max-width: 800px) {
  #container {
    padding: 0;
    margin: 0;
  }
}

你去，800px或更低的边距没有。

在此处查看：http://jsfiddle.net/fCzT9/ 全屏：http://jsfiddle.net/fCzT9/embedded/result/

上一个回答：

在CSS中你有：

@media screen and (min-width: 800px) {
    div#container{
        width:800px;
        margin: 0 auto;
}

这将适用于屏幕至少为800px的每台设备。您已使用固定的800px声明宽度，margin: 0 auto将在屏幕中将该容器与800px对齐。请注意您的设备可能具有高密度屏幕（在iPhone中称为Retina）。

问题的解决方案取决于布局的基础，但请尝试以下方法：

@media screen and (min-width: 800px) {
    div#container{
        width: 100%;
        max-width: 80em;
        margin: 0 auto;
}

这样，最大宽度将是基本字体大小的80倍，16px，从而产生1280px。当宽度以100％声明时，它将占用屏幕中的可用宽度。如果屏幕大于1280像素，它将不会超出它，因为它是最大宽度。

注意：如果您没有使用box-sizing: border-box，如果您将padding添加到已经有width:100%的类中，则填充将作为额外添加到元素的结果宽度中将导致它超出最大宽度，在小屏幕中你可以侧面滚动页面=不好。

我为什么还要在手机身上留有余量？

1 个答案: