使用CSS变换或javascript来缩放元素以动态地适应其父级

Question

我有一个页面,其中有一个<div>元素轮,单击一个按钮时整个轮子旋转.

我通过使用CSS转换实现了这种效果,这些转换本质上是绝对的.然而,车轮非常大,在我的高清显示器上看起来不错,但是较小的屏幕会使边缘切断.我不能像普通布局那样使用%宽度,我需要的是缩放整个页面,就像大多数浏览器缩放功能一样.

对于我自己,我知道ctr + mouseWheel会缩小页面,所以我可以看到整个页面,但我不能指望其他人这样做.

我知道我可以-browser-transform: scale(amt);在包装div上使用以获得我想要的效果,但是我无法找到一种动态的方法.如果我将比例设置为.5,它将是.5,无论屏幕如何.我希望在任何屏幕上,滚轮的边缘距离屏幕边缘几个像素.我知道可以使用媒体查询来帮助解决问题,但是他们会给我留下不太理想的结果,或者需要太多不同的查询.必须有一种方法可以通过-browser-transform: scale(amt);编程方式进行修改,或者采用其他方式进行有限控制.

有什么想法吗？

Answer 1

您是否尝试过在 css 中使用媒体查询来定位不同的屏幕。例如，您的 css 文件中有一个媒体查询，该查询指出宽度为 320 - 480 像素时，包含该轮子的 div 缩放至 50%。然后在 481-768 像素处，div 容器缩放至 75%。从 769 像素以上，div 缩放至 100%。

这应该可以帮助您在不同的屏幕尺寸下实现所需的动态缩放。如果您想要演示，我很乐意制作一个 jsfiddle 来展示它。