Question

我有这个CSS：

#rootView, #topView {
    width: 100rem;
}

如果浏览器宽度大于1000px，如何使宽度为100rem，如果浏览器宽度介于800px和1000px之间，则宽度为80rem？

Answer 1

您必须设置媒体查询。

@media (min-size: 800px) and (max-size: 1000px) {
   #rootView, #topView {
     width: 80rem;
   }
}
@media (min-size: 1001px) {
   #rootView, #topView {
     width: 100rem;
   }
}

参考：MDN

Answer 2

@media screen - 浏览器将自己标识为处于“屏幕”类别。这大致意味着浏览器认为自己是桌面类 - 而不是例如较旧的手机浏览器（请注意，iPhone和其他智能手机浏览器确实将自己标识为屏幕类别）或屏幕阅读器 - 并且它在屏幕上显示页面，而不是打印它。

body{
    background:pink;
}
@media screen and (min-width: 800px) {
  body{
      background:red;
  }
  #rootView, #topView {
    width: 80rem;
  }
}
@media screen and (min-width: 1000px) {
  body{
      background:green;
  }
  #rootView, #topView {
    width: 100rem;
  }
}

Answer 3

您可以使用javascript解决此问题。

function boo() {
            var width = document.getElementById("body").style.width;
            if (width == "800px")
                document.getElementById("topView").style.width="80rem";
            else
                document.getElementById("topView").style.width="100rem";
}

或类似的东西。您可以获得宽度长度，如果大于任何值。但其他答案可能会更好。

当浏览器宽度发生变化时，如何才能使DIV的宽度发生变化？

3 个答案: