更改浏览器宽度时如何更改宽度...？

Question

我最近在我的电脑上制作了新的 HTML 文档。当我与其他comp共享它时。它有小尺寸的显示器，然后一切都乱七八糟！！！

我只是想知道我是否可以编写一个代码，根据设备宽度更改网页中项目的宽度...

然后我想在宽度上使用 % 而不是像素（px）。它起作用了，但不是我想要的。所以我仍然需要帮助......

谢谢！

Answer 1

一个旨在根据显示器或屏幕的大小（或大小）更改其内容的网站，其设计时牢记响应式设计原则。

响应式设计可以通过 CSS 媒体查询来实现。查看有关响应式设计 here 的 MDN 文档。

Answer 2

您正在寻找的是媒体查询。使用媒体查询，您可以根据页面最大/最小宽度使用 CSS 设置页面样式。

看看这个了解更多信息。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

这是一个示例，当屏幕的最大宽度为 900 像素时，将应用以下 CSS。超出该范围的任何内容都将应用上述 CSS

.example {
  font-size: 7rem;
  width: 75%;
}

@media screen and (max-width: 900px){

.example {
  font-size: 3.5rem;
  width: 50%;
}

}