2

我希望我的页面可以缩放以适应所有设备上所有可能的屏幕，所以我使用了一个想法来改变em根元素的大小。所有子元素的大小都在em;

调整页面大小和缩放也应该得到很好的支持。

我目前有 200 行这样有趣的 CSS 代码：

      .........
@media (max-width: 400px) {
     #vb { font-size: .8px}
}
@media (max-width: 350px) {
     #vb { font-size: .7px}
}
@media (max-width: 320px) {
     #vb { font-size: .64px}
}
       .........

我想要求一个可以自动生成此代码的漂亮库。

我确信这个巨大的 css 代码应该在前端生成，因为这 200 - 1000 行会消耗千字节。

PS：我的方法的正确性如何？

解决方案可能是：

  • 如果我通过 JavaScript 计算页面大小并只输入两行代码，例如：

    var fontSize = calculateFS(); $('#vb').style({sizeSize: fontSize});

如果我们不打算调整窗口大小或放大，则此代码效果很好。但如果我要捕捉 onzoom 或 onresize 事件，界面就会出现严重滞后。

  • 社区还有其他想法吗？

感谢您的关注

4

1 回答 1

1

为什么不考虑使用响应式排版rems？

本文更详细地解释了这一点。一个简短的摘录：

@media (max-width: 640px) { body {font-size:1.2rem;} }
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width: 960px) { body {font-size:1.2rem;} }
@media (min-width: 1100px){ body {font-size:1.5rem;} }

这似乎是比使用 em 或像素更好的选择，因为rems它们是相对于body元素而不是父元素的。

我可能误解了这一点，但您似乎不需要使用这么多媒体查询，甚至根本不需要使用任何 JS。

如果您只想保持媒体查询的可维护性，或许可以考虑使用 Compass 和 Sass？http://css-tricks.com/media-queries-sass-3-2-and-codekit/

于 2012-11-23T14:01:29.113 回答