为什么标准的移动尺寸会在侧面留下如此多的房地产？

Question

例如，大多数@media 调用会说设计是 480 像素宽度，但他们将容器设置为 360 像素？他们是为什么没有考虑这么多房间的具体原因吗？示例 320 将容器宽度设置为 260 和 480 将容器宽度设置为下面的 360。

/*  #Mobile (Portrait)

================================================ === */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
    .container,
    .container.floated { width: 260px; }

    .container .columns,
    .container .column { margin: 0; }
    .container .floated { float: left; padding: 0 30px; }
    .floated.sidebar { position: relative; }

    .container .one.column,
    .container .one.columns,
    .container .one.floated,
    .container .two.columns,
    .container .two.floated,
    .container .three.columns,
    .container .three.floated,
    .container .four.columns,
    .container .four.floated,
    .container .five.columns,
    .container .five.floated,
    .container .six.columns,
    .container .six.floated,
    .container .seven.columns,
    .container .seven.floated,
    .container .eight.columns,
    .container .eight.floated,
    .container .nine.columns,
    .container .nine.floated,
    .container .ten.columns,
    .container .ten.floated,
    .container .eleven.columns,
    .container .eleven.floated,
    .container .twelve.columns,
    .container .twelve.floated,
    .container .thirteen.columns,
    .container .thirteen.floated,
    .container .fourteen.columns,
    .container .fourteen.floated,
    .container .fifteen.columns,
    .container .fifteen.floated,
    .container .sixteen.columns,
    .container .sixteen.floated,
    .container .one-third.column,
    .container .two-thirds.column { width: 260px; }


    /* Offsets */
    .container .offset-by-one,
    .container .offset-by-two,
    .container .offset-by-three,
    .container .offset-by-four,
    .container .offset-by-five,
    .container .offset-by-six,
    .container .offset-by-seven,
    .container .offset-by-eight,
    .container .offset-by-nine,
    .container .offset-by-ten,
    .container .offset-by-eleven,
    .container .offset-by-twelve,
    .container .offset-by-thirteen,
    .container .offset-by-fourteen,
    .container .offset-by-fifteen { padding-left: 0; }


    /* Pricing Tables */
    .five-tables .pricing-table,
    .four-tables .pricing-table,
    .three-tables .pricing-table,
    .two-tables .pricing-table { width: 260px; }

}

/* #Mobile（横向） ================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container { width: 360px; }

    .container .columns,
    .container .column { margin: 0; }
    .container .floated { float: left; padding: 0 30px; }
    .floated.sidebar { position: relative; }

    .container .one.column,
    .container .one.columns,
    .container .one.floated,
    .container .two.columns,
    .container .two.floated,
    .container .three.columns,
    .container .three.floated,
    .container .four.columns,
    .container .four.floated,
    .container .five.columns,
    .container .five.floated,
    .container .six.columns,
    .container .six.floated,
    .container .seven.columns,
    .container .seven.floated,
    .container .eight.columns,
    .container .eight.floated,
    .container .nine.columns,
    .container .nine.floated,
    .container .ten.columns,
    .container .ten.floated,
    .container .eleven.columns,
    .container .eleven.floated,
    .container .twelve.columns,
    .container .twelve.floated,
    .container .thirteen.columns,
    .container .thirteen.floated,
    .container .fourteen.columns,
    .container .fourteen.floated,
    .container .fifteen.columns,
    .container .fifteen.floated,
    .container .sixteen.columns,
    .container .sixteen.floated,
    .container .one-third.column,
    .container .two-thirds.column { width: 360px; }

    /* Pricing Tables */
    .five-tables .pricing-table,
    .four-tables .pricing-table,
    .three-tables .pricing-table,
    .two-tables .pricing-table { width: 360px; }

}

我只是想知道在我去重新调整所有东西之前我是否遗漏了一些非常重要的东西。我在我一直使用的几乎所有标准设置中都看到了它，我感觉就像你一样不需要考虑那么多的宽度..

Answer 1

发生这种情况并没有真正的原因。我认为，如果您使用的是网格框架，他们刚刚决定为您的内容提供很大的余量，即使在小屏幕上也是如此。

现在从您发布的内容来看，我认为这些利润太大了。但由于它是 CSS，您可以随意更改。只需设置您自己的媒体查询，将容器设置为您想要的任何内容（我通常在移动设备大小的设备上设置大约 10 像素的边距）。但这取决于你。

同样没有真正的原因会发生这种情况，只是某个地方的某个人为您正在使用的框架决定了它。我知道 Twitter Bootstrap 等其他工具在移动设备尺寸上的边距约为 10 像素。

我认为您分享的示例中没有任何标准。我敢说，两边有那么多房地产是非常不标准的。