Question

只是想知道他们是否有更有效的方法来做到这一点？

$(window).resize(function()                                                                   
{                                                                                             
    $('.title').css('font-size',Math.floor($(window).width()*0.2)+'px');                         
    $('.title').css('background-size',Math.floor($(window).width()*0.5)+'px');                   
    $('.title').css('padding',($(window).width()*0.1)+'px 0px '+($(window).width()*0.1)+'px');   
});  `

我这样做是为了让我的网络应用程序（cordova / phonegap）正确调整所有设备的大小。我尝试过使用视口并且结果好坏参半，特别是当要使文本相对于dpi和屏幕尺寸进行缩放时。

Answer 1

有几种方法可以做到这一点。移动视图中有一些预先制作的库，例如BootStrap。

您可以使用百分比而不是通过jquery修改css。

对于一些帮助，一个很好的css教程网站是w3Schools css教程页面。

每个结果都有不同的结果。

现在，在您的示例代码中，您使用的是window.width* 0.5或window.width / 2，这是一半。如果您位于没有宽度设置的根元素中，则可以使用50％而不是像素来轻松实现您正在寻找的效果。

然而，很可能不是那样的。您可能必须指定父元素的宽度才能实现此目的。

Answer 2

你考虑过使用css @media吗？它更整洁，并且不需要触发javascript事件。

可在此处找到更多信息 http://www.w3schools.com/css/css_mediatypes.asp

Answer 3

您可以使用@media查询来实现此目的。

相对于窗口缩放CSS

3 个答案: