Can I use device-width in css to get width of the browser in css itself?

Question

I have a doubt that, can I apply/use device-width to style a div instead of giving 100% for a div?

I tried its working but not sure whether its good practice or not.

`

.myDiv{
        width:device-width;
}
instead.
.myDiv{
        width:100%;
}

`

or am I doing it wrong?

Thanks in advance.

There is nothing called 'device-width'. use 100% – Gibbs Jul 23 '14 at 07:06 — Gibbs, Jul 23 '14 at 07:06
I have used 100vw. thanks – Rajilesh Panoli Mar 06 '19 at 11:38 — Rajilesh Panoli, Mar 06 '19 at 11:38

score 1 · Accepted Answer · answered Jul 23 '14 at 07:15

Yes, you can do this. There is new css3 style called vh & vw. This calculated the viewport height or weight. You can use to set any height or width to any container. Refer

http://quirksmode.org/css/viewport.html

http://css-tricks.com/viewport-sized-typography/

VH & VW Supported Browser http://caniuse.com/viewport-units

I hope this helps you.

score 0 · Answer 2 · answered Jul 23 '14 at 07:30

First off i would like to give you some clarification on the difference between the two. http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

In my own experience I prefer to use width:100% as it will show at largest resolution on the web browser and each of the web browsers will show it in the best way they can. Unless the person is using Internet Explorer because lets face it the only thing that IE is good for is to install another internet browser.

So it would seem that if you where creating this specifically for mobile phones then you could use the device-width instead but if it would be opened on other devices suck as ipad or pc then width:100%; would be the preferred option.

Hope this has helped Good luck.

Can I use device-width in css to get width of the browser in css itself?

2 Answers2