无论如何用Css找出屏幕宽度

Question

使用媒体查询@media (min-device-width:1024px)如果我们这样给出，它将检查宽度是否至少为1024px。是否有任何方法可以在我们的css中使用设备宽度，以便设置宽度我们的应用程序体到设备宽度？ 与Jquery的另一种方式我可以这样做

$('body').css('width',screen.width)

有没有什么办法可以在不触及Js的情况下使用css将宽度设置为当前屏幕宽度？

Answer 1

这应该可以使用视口单元，如：

vw (viewport width) and
vh (viewport height)

就像百分比一样，你可以用百分比来表示这个值。

100vw会给你一个全屏宽度，100vh会给你一个全屏高度。

它可以有的一个问题是浏览器支持。 要了解有关此检查的更多信息 http://caniuse.com/#feat=viewport-units

希望这有帮助

Answer 2

不仅有css方式来捕获屏幕宽度，或者您使用媒体查询或者您可以使用js / jquery解决方案动态检测设备的宽度，您还可以使用max-width和{{1使用某些设备，但这需要任何方式的媒体查询，这是当前可用的解决方案：

Jquery ：

min-width

的 CSS

<script type="text/javascript">

    $(document).ready(function()
    {
    if($(window).width() < 1500)
      // your code 
    else
      // your code
    });

    </script>

Answer 3

使用CSS媒体查询动态设置CSS，例如：

@media (max-width: 1024px) {
  .wrapper {

  }
}

或者，您可以使用JavaScript来检测屏幕大小并相应地更改CSS，例如：

screen.height

screen.width

Answer 4

如果您使用百分比html, body {width: 100%}，则始终将容器设置为屏幕大小。从那里你可以做任何你想做的事。