保留不同屏幕尺寸的屏幕尺寸

Question

我刚刚开始学习网页设计，但遇到了两个不同的问题。具体来说，针对不同的屏幕尺寸进行缩放。我希望网站的长宽比是恒定的，而不管实际的屏幕大小如何。我知道这意味着屏幕浏览器的两边会存在无法完全满足此比例的空白，但这是可以的。我想知道是否有一种方法可以强制执行此恒定的长宽比。大概可以用最少的额外工作来解决我的扩展问题。我有一个截止日期，所以我不能完全重新实现我的定位属性。

Answer 1

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

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

大多数Web开发框架默认情况下都包含媒体查询，并选择以下两种方法之一-优先显示在最宽的屏幕（桌面优先）或最小的屏幕（移动优先）上。根据您认为访问最常访问您的网站（提示：移动）的方式，您可以创建网站设计，使其主要侧重于这些设备，而花费较少的时间设计大型设备。

Answer 2

您可以使用vh，vw，vmin或vmax。它们像百分比一样从0缩放到100，但始终相对于视口而不是包含元素。因此，如果您进行width: 100vw; height: 50vw;，则外观总是相同的。您还可以进行诸如mm，cm之类的固定单位。您也可以进行媒体查询，但是您的应用程序可能需要旋转感知。