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

您无法使用CSS更新DOM中的属性。你可以做的是编写一个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来实现。

如果您只是想在屏幕低于500px且不高于它时更改某些css值。这完全可以通过使用媒体查询来实现，这是一个简单的例子：

<强> 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%;
            }
      }

如何在CSS中获取窗口大小

5 个答案: