我有一个页面，其中有一个<div>元素的轮子，当你点击一个按钮时整个轮子都会旋转。
我通过使用CSS转换来实现这种效果，这些转换本质上是绝对的。然而，车轮非常大，在我的高清显示器上看起来不错，但是较小的屏幕会使边缘切断。我不能像普通布局一样使用％宽度，我需要的是缩放整个页面，就像大多数浏览器缩放功能一样。
对于我自己，我知道ctr + mouseWheel会缩小页面，所以我可以看到整个页面，但我不能指望其他人这样做。
我知道我可以在包装div上使用-browser-transform: scale(amt);来获得我想要的效果，但是我无法找到一种动态的方法。如果我将比例设置为.5，它将是.5，无论屏幕如何。我希望在任何屏幕上，滚轮的边缘距离屏幕边缘几个像素。我知道可以使用媒体查询来帮助解决问题，但是他们会给我留下不太理想的结果，或者需要太多不同的查询。必须有一种方法可以通过编程方式修改-browser-transform: scale(amt);，或者采用其他方式进行有限控制。
有什么想法吗？
答案 0 :(得分：0)
您是否尝试在css中使用媒体查询来定位不同的屏幕。例如，在css文件中有一个媒体查询，指出宽度为320 - 480像素时，包含此轮的div将缩放到50％。然后在481-768像素处，div容器缩放到75％。从769像素开始，div被缩放到100％。
这应该可以帮助您在不同的屏幕尺寸下完成所需的动态缩放。如果你想要一个演示，我很乐意让一个jsfiddle显示它。