相对于窗口缩放CSS

Scaling CSS relative to window

本文关键字：CSS 缩放 窗口 相对于      更新时间：2023-09-26

只是想知道他们的方法是否更有效？

$(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）为所有设备正确调整大小。我尝试过使用viewport，结果喜忧参半，尤其是当涉及到让文本相对于dpi和屏幕尺寸进行缩放时。

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

您可以使用百分比来代替通过jquery修改css。

为了获得一些帮助，一个不错的css教程网站是w3Schools css教程页面。

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

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

然而，情况很可能并非如此。您可能必须指定父元素的宽度才能实现这一点。

您是否考虑过使用css@media。它更简洁，并且不需要触发javascript事件。

更多信息可以在这里找到http://www.w3schools.com/css/css_mediatypes.asp

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

相关文章：