如果屏幕更改为像移动设备这样的小屏幕，则将 div 更改为全屏答案

【问题标题】：Change a div to be full screen if screen changes to a small screen like a mobile device如果屏幕更改为像移动设备这样的小屏幕，则将 div 更改为全屏
【发布时间】：2019-12-02 02:10:53
【问题描述】：

我真的很难清楚地表达我想要实现的目标，请多多包涵。

我的页面左侧和侧面有一个小的“小部件”。这在更大的屏幕上运行良好。

例如，小部件在样式中是 300 像素宽。

但是，如果我在移动设备上加载页面或缩小窗口，这将变得非常小。如果观察到“较小”的视图空间，我如何让它自动从 300 像素更改为全 100% 宽度？

也就是说，我缩小了我的窗口，它会突然跳到 100% 宽而不是 300 像素？（或类似的）

有什么想法吗？

抱歉，如果我解释得不够清楚。我已经用谷歌搜索了，没有什么能真正突出我正在做的事情..也许我没有寻找正确的术语..有点我不知道我不知道用谷歌搜索它。

干杯

【问题讨论】：

标签： html css fullscreen viewport

【解决方案1】：

你想说的是“我怎样才能让我的网站响应？”。您可以使用CSS Media Queries 做到这一点。查看链接和谷歌了解更多信息。

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

.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% 的宽度。（尝试在运行 sn-p 时调整当前窗口的宽度以了解其工作原理）。

编辑：如果这是你要找的，你也可以使用如下风格（想法在min-width）。

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

【讨论】：

【解决方案2】：

显然，您使用的是 CSS 单元“px”。如果你想有一个相对于屏幕的大小，单位 %、vw 和 vh 会很有用。

% 是相对于父元素的，它可能是整个文档，因此您可以将其作为一个相对单位。
vh 表示视口高度的百分比，因此您可以将其用于小部件的高度
vw 表示视口宽度的百分比，因此您可以将其用于小部件的宽度

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

希望能帮到你。

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

也可以看看https://www.w3schools.com/css/css_rwd_mediaqueries.asp

【讨论】：

谢谢，只使用 PX 来显示我的 div。我可能最终会使用 vh,vw，因为这样更有意义。