【发布时间】：2015-01-04 18:47:06
【问题描述】：
是否有根据屏幕尺寸自动缩放 CSS 中定义的元素的高度和宽度的方法？ 现在市场上有很多不同的屏幕尺寸，为每种尺寸创建单独的 CSS 是相当繁重的。想知道是否可以将相同的 CSS 用于基于屏幕尺寸的自动缩放。例如，原始 CSS 是为 1200x800 屏幕尺寸构建的。如果页面是在这个大小的一半的屏幕上打开的，那么所有以像素为单位定义高度和宽度的 css 元素都应该自动缩小到一半。我知道在非常小的屏幕中打开页面时它看起来不太好，因为一切看起来都很小。但是，要求基本上是自动将应用屏幕调整为笔记本电脑、台式机和平板电脑屏幕。
例如，我有一个 div，在该 div 内有 5 个按钮（使用 CSS 创建）。在较小的屏幕上，按钮行包裹成两行，使其看起来很糟糕。这只是一个例子。大多数其他屏幕元素的行为类似。
【问题讨论】：
-
您有多种方法可用，其中包括媒体查询（数百万个链接，但这里有一个：css-tricks.com/logic-in-media-queries）和我非常喜欢的另一种，视口单元（例如：css-tricks.com/the-lengths-of-css视口百分比长度）。您基本上是在描述所谓的响应式设计 (en.wikipedia.org/wiki/Responsive_web_design) --- 玩得开心 ^^
-
谢谢！ vw 和 vh 听起来很有趣。我正在调查它。唯一的问题是我预先看到旧版本的浏览器不支持这些。根据我们的网站管理员分析，有很多人仍在使用 5 年前的浏览器版本。
-
也许试试这个（刚刚在 Google 上快速搜索了没有 css 3 的响应式设计 :)）：responsejs.com
-
感谢您为我指明正确的方向。我只是在 CSS 中做了一个小改动。我没有在 px 中使用字体，而是将其更改为 rem（有很多 ul/li 菜单按钮从内部标题的字体中获取 H/W）。仅此一项就对跨视口渲染产生了巨大影响。
-
我会回答的，请采纳，然后:)