基于屏幕尺寸的 CSS 参数缩放

Question

是否有一种自动方法可以根据屏幕尺寸缩放 CSS 中定义的元素的高度和宽度？现在市场上有这么多不同的屏幕尺寸，为每一个创建单独的 CSS 是相当繁重的。想知道是否可以将相同的 CSS 与基于屏幕尺寸的自动缩放一起使用。例如，原始 CSS 是为 1200x800 屏幕尺寸构建的。如果页面在这个尺寸的一半屏幕上打开，所有以像素为单位定义高度和宽度的 css 元素都应该自动缩小到一半。我知道当页面在非常小的屏幕中打开时看起来不会很好，因为一切看起来都很小。然而，需求基本上是自动将应用屏幕调整到笔记本电脑、台式机和平板电脑屏幕。

例如，我有一个 div，在该 div 中有 5 个按钮(使用 CSS 创建)。在较小的屏幕上，按钮行被分成两行，看起来很糟糕。这只是一个例子。大多数其他屏幕元素的行为相似。

Answer 1

经 OP 评论和批准:

您有多种方法可用，其中包括媒体查询(周围有数百万个链接，但这里有一个:http://css-tricks.com/logic-in-media-queries)和另一种我非常喜欢的方法，视口(viewport)单位(例如，请参见此处:http://css-tricks.com/the-lengths-of-css 视口(viewport)百分比长度)。您基本上是在描述所谓的响应式设计 (http://en.wikipedia.org/wiki/Responsive_web_design) --- 玩得开心 ^^

也许可以在没有 css 3 的情况下尝试响应式设计:http://responsejs.com