CODEWITHSUNDEEP
cssmedia-queries
Jayababu
Jayababu

Reputation: 1621

anyway to find out screen width with Css

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.?

Upvotes: 1

Views: 4452

Answers (4)

ZEE
ZEE

Reputation: 5849

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) { ... }

Upvotes: 0

Liviu Dobre
Liviu Dobre

Reputation: 1

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.

Upvotes: 0

GibboK
GibboK

Reputation: 73918

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

Upvotes: 0

servinlp
servinlp

Reputation: 795

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

Upvotes: 1

Related Questions