Question

左边的图片就是现在在手机屏幕上的样子。右边的图片是我想要的样子，每行可以容纳更多的单词。我将html背景设置为红色以突出显示它，并将body div设置为灰色。

为了获得该结果，我需要对代码进行哪些更改？我不确定为什么页面在右侧包含该部分，但左侧看起来没问题。我想把这个部分从屏幕上移开。我不确定这段代码是否有帮助，但这里是:(也许它与div.container有关）

@media only screen and (max-width: 680px) {
        div.container {
        margin: 0 auto;
        width: auto !important;
    }

Answer 1

以您的风格添加这些：

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

如果它没有任何意义，那么将此视口添加到html中的head标签：

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no; target-densityDpi=device-dpi" />

较小屏幕尺寸的配置问题

1 个答案: