html - 为不同的屏幕尺寸保留屏幕尺寸

Question

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

标签： htmlcss

Answer 1

是的，您可以使用与视口相关的 CSS 单位。简单地说，这些被称为“视口单位”，用vh高度和vw宽度表示。A widthof100vw将确保内容与视口的大小完全相同，无论视口有多宽。

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

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