Question

我希望我的页面可以扩展以适应所有设备上所有可能的屏幕，因此我使用了一个想法来更改根元素的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上捕捉事件，那么界面会有严重的滞后。

社区中的任何其他想法？

感谢您的关注

Answer 1

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

This article更详细地解释了这一点。摘录摘录：

@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;} }

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

我可能误解了这个，但看起来你不需要使用这么多媒体查询，甚至根本不需要任何JS。

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

寻找媒体查询生成器

1 个答案: