Html 不同屏幕尺寸的显示问题

发布于03月24日

有一个网站在我的电脑上显示得非常好，但在笔记本电脑或屏幕上，底部出现了滚动条，我试图对包装应用不同的样式，但如果网站开始正常显示，那么当分辨率降低时，问题就开始了.

Display on PC:

Display on laptop:

Display on laptop when changing resolution:

站点 struct 如下所示:

<div class="wrapper">
<section class="section">
            <div class="container">
                <div class="main__content">
                    <h1>Content</h1>
                    <p>Content</p>
                    <p>Content</p>
                </div>
            </div>
        </section>
</div>

边界框样式:

.container {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;
}

.wrapper {
    min-width: 1720px;
}

Changes made:个

添加了以下样式:

.container {
  width: 100%;
  margin: 0 auto;
}

If you add a background, it looks like this:

但我需要它在分辨率降低时自适应地缩小，这样站点标题中的导航就不会相互碰撞.

推荐答案

您的问题是让您的包装器具有设置的宽度:min-width: 1720px;设置这个最小宽度您是在告诉元素它必须有那么大，这在移动设备上会看起来很奇怪，因为那些屏幕并不那么大.

对此有许多简单的修复方法，但下面是一个简单的示例，它可以略微简化您的代码并提供您想要的响应速度:

.container {
  width: 100%;
  margin: 0 auto;
}

.wrapper {
  /* not actually needed */
}

.main__content{
  padding-left:40px;
  padding-right:40px;
}

和超文本标记语言

<div class="wrapper">
  <section class="section">
    <div class="container">
      <div class="main__content">
        <h1>Content</h1>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
  </section>
</div>

您在注释中注意到，在div周围显示了一个"白色"区域.要修复这样的项目并保持背景 colored颜色的一致性，您需要设置页面所在区域的样式(例如，body)，以获得您想要的外观.

例如，将此内容添加到您的Body元素将使整个背景变为蓝色:

body {
  background: blue;
  /* to make text legible */
  color: white; 
}

Html相关问答推荐

通过POST方法提交html表单时CSV文件无法通过(在使用Django的上下文中)

将表格背景图像置于行背景 colored颜色之上

响应网格，响应调整大小以适应父div，保留父div S自己的响应高度

OnChange函数未在下拉列表中使用一个选项触发

如何在HTML中适当地为单选按钮网格添加标签？

在Hero部分中同时zoom 背景图像和形状的问题

HTML中的ARIA标签：在元素内部还是外部？(&Q；

rvest： Select 不包含链接的段落(<；p>；)

网格布局中的组件

如何使用CSS Select 表亲元素

如何配置 prettier 使其以 Vue.js 模板语法的特定方式运行？

输入框不是全宽

单击按钮时更改字体真棒图标

在随机图像下对齐文本

在 SQL 中合并 HTML 表中的单元格

如何在 bootstrap 程序导航栏中居中搜索图标

为什么 `html` 上的 overflow： hidden 将滚动框移动到正文？

如何自定义具有白色透明背景的光标图像？

不会与
对齐

是否可以使用纯 css 创建具有斜角效果的锯齿形边缘？

实用课程推荐