为不同的屏幕尺寸保留屏幕尺寸答案

【问题标题】：Preserving screen dimensions for different screen sizes为不同的屏幕尺寸保留屏幕尺寸
【发布时间】：2019-07-08 07:40:17
【问题描述】：

我刚开始学习网页设计，遇到了几个不同的问题。具体来说，针对不同的屏幕尺寸进行缩放。无论实际屏幕尺寸如何，我都希望网站的长宽比保持不变。我知道这意味着屏幕的浏览器两侧会有死区，不适合这个比例，但没关系。我想知道是否有办法强制执行这种恒定的长宽比。据推测，这将以最少的额外工作解决我的扩展问题。我在最后期限，所以我不能完全重新实现我的定位属性。

【问题讨论】：

标签： html css

【解决方案1】：

是的，您可以使用与视口相关的 CSS 单位。简单地说，它们被称为“Viewport Units”，并用vh 表示高度，vw 表示宽度。 width 或 100vw 将确保内容与视口的大小完全相同，无论视口有多宽。

但是，您可能在寻找的是 media queries。这些是在某些视口断点处触发的 CSS 的“部分”。通常，您有一个用于台式机的触发器，一个用于笔记本电脑的触发器，一个用于平板电脑的触发器，一个用于移动电话的触发器。标准设备媒体查询的完整列表available at CSS Tricks。

大多数 Web 开发框架默认包含媒体查询，并选择两种方法之一 - 优先显示在最宽屏幕上（桌面优先）或最小屏幕（移动优先）。根据您认为访问者最常查看您网站的方式（提示：移动设备），您可以创建网站设计以主要关注这些设备，而花更少的时间为更大的设备进行设计。

【讨论】：

【解决方案2】：

您可以使用vh、vw、vmin 或vmax。它们以 0 到 100 的比例缩放，但始终与视口相关，而不是与包含元素相关。因此，如果您使用width: 100vw; height: 50vw;，它看起来总是一样的。您还可以执行固定单元，例如mm、cm 等。您也可以执行媒体查询，但您的应用程序可能需要支持旋转。

【讨论】：