使用CSS变换或JavaScript动态缩放一个元素以适应其父元素。

Question

我有一个页面，其中包含一个由 <div> 元素组成的轮盘，当你点击按钮时整个轮盘会旋转。

我使用 CSS 变换实现了这个效果，它是绝对的。然而，轮盘非常大，在我的高清显示器上看起来很好，但小屏幕会被裁剪掉边缘。我不能像普通布局那样使用百分比宽度，我需要以与大多数浏览器缩放功能相同的方式缩小整个页面。

我知道 ctr+鼠标滚轮可以缩小页面，以便我可以看到整个页面，但我不能指望别人这样做。

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

有什么想法吗？

- zeel

---

这个问题我一筹莫展。没有人有线索吗？ - zeel

你有轮子（部件）的绝对尺寸吗？如果在问题中添加一个小的+工作示例，会有所帮助，否则很难想象你的代码是什么样的。 - 无论如何，按照我理解的方式，如果你有固定的轮子尺寸和固定的（但事先未知的）浏览器尺寸，则需要使用JavaScript来确定比例。 - Jeroen

你是说你想根据视口大小计算 amt 吗？ - Robin Maben

看起来最直接的方法是在页面加载后使用JS设置样式属性，一旦有了窗口大小。如果您可以使用JS进行此操作，请发表评论或更新您的问题；这很容易做到。 - DigTheDoug

你可以使用带有供应商前缀的CSS3 Transform2D Scale来处理这个问题，而不是使用JS。 - Ilan Biala

Answer 1

你尝试过在CSS中使用媒体查询来针对不同的屏幕吗？例如，在你的CSS文件中设置一个媒体查询，当屏幕宽度为320-480像素时，包含此轮子的div缩放为50%。然后在481-768像素时，div容器缩放为75%。769像素及以上，则div缩放为100%。

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

- Ilan Biala

---

虽然从技术上讲这是可行的，但我需要很多媒体查询来适应各种屏幕尺寸，同时仍保持外观在可接受的偏差范围内。而且请记住，并非每个人都使用浏览器填充屏幕进行查看，可能的尺寸数量太多了。简而言之，冗余太多，媒体查询不是一个优雅的解决方案。 - zeel

不一定，例如将1920x1080的显示器分屏会使其降至1920x540，这将在(min-width: 481px)和(max-width: 768px)范围内。如果您使用范围，则不需要那么多。首先，为期一周左右的基本网站与Google Analytics一起使用，查看人们访问网站的分辨率，并主要针对这些设计。或者，如果您不想等待，可以设计最常见的分辨率，例如320x480、800x480、960x640、1024x768、1600x900、1920x1080。别忘了模拟并为每个屏幕大小编写新的十进制数并不需要太多工作。 - Ilan Biala

我想为您制作一个jsfiddle，您是否考虑过除我在回复中和您之前的评论中列出的尺寸以外的其他尺寸？您是否已经创建了一个带有轮子的fiddle？ - Ilan Biala

我不需要概念验证，我知道它会在一定程度上起作用，但我正在寻找更优雅的解决方案。 - zeel

不是为了证明概念，我想实际为您完成这个任务，因为我觉得这是最优雅的解决方案，如果您选择不使用它，我也可以接受。此外，这对我来说也是一个很好的机会去使用媒体查询和CSS转换。我很想为您完成这个任务。 - Ilan Biala