如何在 css 中更新参数

Question

我有一个JSP可以创建一个CSS样式文件。在该JSP中，我使用了一个deviceWidth参数，该参数是从调用该JSP的索引页发送的请求中获得的。我还使用媒体查询来捕获设备中的方向变化。

问题是，一旦方向更改 - 我需要更新 deviceWidth 参数，而且我不知道该怎么做。

我似乎无法在"样式"块中使用"脚本"标签，并通过 window.location.href...使用新参数值也不起作用。

澄清一下：这是我的 JSP 的样子：

<% 
  double deviceWidth = new Double(request.getParameter("width"));
%>
<style>
   .class1{
      BLA BLA BLA <%=deviceWidth%>px;
   }
   .class2{
      BLA BLA BLA <%=deviceWidth%>px;
   } 
   .class3{
      BLA BLA BLA <%=deviceWidth%>px;
   }
   @media only screen  and (orientation: portrait){
      .class1{
         FOO FOO <%=deviceWidth%>px;
      }
      .class2{
         FOO FOO <%=deviceWidth%>px;
      }
   }
</style>

仅在每个部分上具有更多的类，并且媒体查询中的 deviceWidth 应该是与媒体查询外部的设备宽度不同的。有什么方法可以只更新一次而不是为每个元素单独更新吗？

Answer 1

只需创建两个 CSS 类：

.width1 {
 width: 300px;
}
.width2 {
 width: 500px;
}

然后用javascript更改元素的css类（removeClass/addClass）

Answer 2

您可以检测窗口大小调整事件，获取新的窗口宽度并相应地更新 css：

$(window).resize(function() {
    var value = $(window).width();
    $('.myClass').css('width', value + 'px');
});

您可能需要对窗口宽度值进行一些数学运算，但希望这能让您走上正确的道路。