javascript - 相对于窗口缩放 CSS

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) 为所有设备正确调整大小。我尝试过使用视口(viewport)，但结果好坏参半，尤其是在让文本相对于 dpi 和屏幕尺寸进行缩放时。

Answer 1

有几种方法可以做到这一点。有一些预制库，例如 BootStrap用于移动 View 。

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

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

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

---

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

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