如果屏幕变为移动设备等小屏幕，则将 div 更改为全屏

Question

我真的很难说清楚我想要达到的目标，请耐心等待..

我的页面左侧和侧面有一个小 "widget"。这在更大的屏幕上工作正常。

例如，小部件在样式中的宽度为 300px。

但是，如果我在移动设备上加载页面或缩小 window，这会变得非常小。如果观察到 "smaller" 视图空间，我如何让它自动从 300px 更改为完整的 100% 宽度？

所以说，我缩小 window ，它会突然跳到 100% 宽而不是 300px？（或类似）

有什么想法吗？

对不起，如果我解释得不够好。我已经 googled 并且没有什么真正突出的东西可以实现我正在做的事情.. 也许我没有在寻找正确的术语.. 在一点点我不知道我不知道什么 google 它。

干杯

Answer 1

你想说的是 "How can I make my website responsive?"。您可以使用 CSS Media Queries 来做到这一点。查看 link 和 google 了解更多信息。

给你一个想法，试试这个：

.my-class{
color: white;
background: black;
width: 300px;
}

@media (max-width: 600px) {
  .my-class {
    width: 100%;
  }
}

<div class="my-class">
    Some text!
<div/>

这里的断点是 600px，对于大屏幕，div 的宽度是 300px，对于小屏幕，宽度取 100%。（尝试调整当前 window 的宽度，同时运行代码段以了解其工作原理）。

编辑：你也可以使用如下样式（思路在min-width），如果这是你要找的。

my-class{
  width: 300px;
  min-width: 100%; /* or 100vw depending on what you want */
}

Answer 2

显然，您正在使用 CSS-单位“px”。如果你想要相对于屏幕的大小，单位 %、vw 和 vh 会有用。

这些只是一些示例，如果您想了解有关 CSS 单位的更多信息，请转到 https://www.w3schools.com/CSSref/css_units.asp

希望能帮到你

但是，如果您想保留 px 单位，您可以使用 媒体查询 ，正如 Il Saggio Vecchino 已经提到的那样。这允许您在不同的设备上有不同的设计。

Change a div to be full screen if screen changes to a small screen like a mobile device