anyway to find out screen width with Css

Question

using media queries @media (min-device-width:1024px) if we give like this,it will check whether width is atleast 1024px or not.Is there any way that we can use the device-width in our css,in order to set the width of our application body to the device-width? another way with Jquery i can do like this

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

Is there any way that we can set the width to current screen width using css without touching Js.?

Answer 1

This should be possible using the Viewport units like:

vw (viewport width) and
vh (viewport height)

Just like percents u can give this a value in percentages.

100vw will give u a width of the full screen and 100vh will give u a height of the full screen.

one problem it can have is browser support. To know more about this check http://caniuse.com/#feat=viewport-units

Hope this helps

Answer 2

Use CSS media queries to set the CSS dynamically, example:

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

  }
}

Alternatively you can use JavaScript to detect screen size and change CSS accordingly, here an example:

screen.height

screen.width

Answer 3

If you work in percentages html, body {width: 100%} always sets the container to the size of the screen. From there you can do anything you want.

Answer 4

there is no only css way to capt the screen width, or you use media queries or you can use js/jquery solution to detect dynamically the width of the device , you can also use max-width and min-width with certain device but this require media queries any way , here is the current available solutions :

Jquery :

<script type="text/javascript">

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

    </script>

css

@media (min-width: 700px) { ... }

@media (min-width: 700px) and (orientation: landscape) { ... }

@media tv and (min-width: 700px) and (orientation: landscape) { ... }