0

I have a JSP which creates a CSS style file. In that JSP I am using a deviceWidth parameter which I get from a request being sent by the index page that is calling that JSP. I am also using a media query to catch an orientation change in the device.

The problem is, that once an orientation change has been made - I need to update the deviceWidth parameter, and that I don't know how to do.

I can't seem to be using a 'script' tag inside the 'style' block, and recalling the page by window.location.href... with the new parameter value does not work either.

to clarify: this is how my JSP looks like:

<% 
  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>

only with MANY more class on each section, and the deviceWidth inside the media query should be a different one then the deviceWidth outside of the media query. Any way i could just update it once and not individually for each element?

4

2 回答 2

1

只需创建两个 CSS 类：

.width1 {
 width: 300px;
}

.width2 {
 width: 500px;
}

然后使用 javascript (removeClass / addClass) 更改元素的 css 类

于 2013-11-04T09:20:15.597 回答
0

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

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

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

于 2013-11-04T09:28:31.667 回答