基于屏幕大小的CSS参数缩放

Question

是否有自动方法根据屏幕尺寸缩放CSS中定义的元素的高度和宽度？ 目前市场上有许多不同的屏幕尺寸，为每个屏幕创建单独的CSS是相当繁重的。想知道相同的CSS是否可以与基于屏幕尺寸的自动缩放一起使用。比方说，原始CSS是为1200x800屏幕尺寸构建的。如果页面在此大小的一半的屏幕上打开，则所有以像素为单位定义高度和宽度的css元素应自动减少一半。我知道在一个非常小的屏幕上打开页面时看起来不太好，因为一切看起来都很小。但是，要求主要是自动将应用程序屏幕调整到笔记本电脑，台式机和平板电脑屏幕。

例如，我有一个div，在div里面有5个按钮（使用CSS创建）。在较小的屏幕上，按钮行包裹成两行，使其看起来非常糟糕。这只是一个例子。大多数其他屏幕元素的行为类似。

Answer 1

经OP评论和批准：

您有多种方法可供使用，其中包括媒体查询（百万个链接，但这里只有一个：http://css-tricks.com/logic-in-media-queries），另一个我非常喜欢，视口单元（请参阅此处：http://css-tricks.com/the-lengths-of-css视口百分比长度）。您基本上描述了所谓的响应式设计（http://en.wikipedia.org/wiki/Responsive_web_design）---玩得开心^^

如果没有css 3，可以尝试使用响应式设计：http://responsejs.com

Answer 2

媒体查询是要走的路。对于旧浏览器（IE＆lt; 10），这是一个很棒的网页，其中包含“polyfill”：

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills