时间戳

首页 > 解决方案 > 为什么添加媒体会改变元素的某些属性？

html - 为什么添加媒体会改变元素的某些属性？

问题描述

我已经用 CSS 和 HTML 开始了我的第一个模板。我正在观看创建一些主线模板的教程。代码非常简单。的HTML：

<div class="parent">
    <div class="container">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
</div>

CSS：

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  background-color: red;
  width: 600px;
}

当他从浏览器减小页面大小时，出现了一个水平滚动条并且文本没有换行。添加此媒体后，滚动条消失并且文本换行。

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

为什么添加媒体后滚动条消失了？

图像没有媒体

图像与媒体

标签： htmlcss

解决方案

（您提供的代码不会表现出这种行为。请参阅此答案的结尾。）

如果元素对于窗口来说太宽，则会添加一个滚动条，以便您可以滚动查看整个元素。

媒体查询允许您根据媒体的属性指定要应用的不同 CSS。

这允许您说“如果窗口比 X 更宽（或更窄），则将元素的宽度设置为 Y”。这意味着您可以更改元素的宽度，因此当窗口较窄时，元素也较窄，因此它仍然适合窗口，并且不需要滚动条来查看整个内容。由于不需要滚动条，因此不添加滚动条。

但是，在您的代码中，您不会看到这种效果，因为.container如果没有任何媒体查询适用，则该元素的宽度最小。我只能假设.container在添加媒体查询的同时更改了默认宽度。

推荐阅读