如何在css中获取窗口大小

Question

我有一个需求，我想使它与knockout.js一起工作。我有一个与属性绑定的div。当用户调整窗口大小时，我打算通过CSS来设置属性绑定，我觉得应该更新视图模型。

所以任何人都可以告诉我是否有可能获得超过500px的屏幕大小以及是否可以通过css更新属性绑定？

请让我知道，如果有关于这方面的任何进一步的信息是必需的。

Answer 1

您无法使用CSS操作DOM元素属性，您将需要使用JavaScript！

Answer 2

使用height和width ，并得到高度和宽度像下面

$(window).height() ; 

或

$(window).width(); 

if($(window).height() >=500) 
{...// apply your code 
} 

，并设置你的CSS，你也可以使用css

$("#divid").css({"height":"in px","width":"in px"}); 

或

$("#divid").height(any number); 
$("#divid").width(any number); 

Answer 3

你不能更新DOM与CSS的属性。你可以做的是写一个resize事件来处理div的大小变化，并根据它改变属性。

所以基本上，与事件监听器，你将能够做到这一点，但绝对不与CSS :)。

你可以使用JavaScript或jQuery来实现。

Answer 4

我想这可能是你想要什么：

@media (max-width: 500px) { 
    #myDIv: { background-color: red; } 
} 

@media (min-width: 500px) { 
    #myDIv: { background-color: blue; } 
} 

@media标签通常是在响应式设计中使用。使用@media标记，您不需要js来监听调整窗口操作的大小。

Answer 5

如果我正确理解你的问题，我认为你可以通过CSS来做到这一点。

如果你只是想改变一些CSS的值，当你的屏幕低于500px而不是高于它。这是完全有可能通过媒体查询，这里是一个简单的例子：

HTML

把以下元你的页面头部内（智能手机+平板电脑等）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

CSS

.your-class { 
      display: block; 
      background:green; 
      height: 100%; 
      width: 50%; 
     } 



    @media screen and (max-width: 500px) { 
/* This is only added when the size of the window is under 500px */ 
    .your-class { 
       display: block; 
       background: blue; 
       height: 100%; 
       width: 100%; 
      } 
     }