6

我有一个页面，其中有一个<div>元素轮，当您单击一个按钮时，整个轮子会旋转。

我通过使用本质上是绝对的 CSS 变换来实现这种效果。但是轮子很大，在我的高清显示器上看起来不错，但较小的屏幕会被切掉边缘。我不能像使用普通布局那样使用 % 宽度，我需要以与大多数浏览器缩放功能相同的方式缩小整个页面。

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

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

有什么想法吗？

4

1 回答 1

0

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

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

于 2012-09-04T15:00:27.760 回答