25

I'm doing a mobile website now and trying to target different devices using CSS3 media queries. Part of my code is as follows:

@media screen and (max-width:320px) {
body {
    width: 320px;
}
/* some other style */  
}

As you can see, I have to set the body width explicitly to make sure it doesn't show the width I set for desktop in my normal css, which is 920px. I'm wondering if there is any way that the body width can be set automatically to the device width and I don't need to set this manually every time I create a new @media.

By the way, I also add the following code inside my head tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
chaonextdoor
  • 5,019
  • 15
  • 44
  • 61

3 Answers3

44

You can also use 

width: 100vw;

That will set the element to 100% of the viewport's width. You might want to check your browsers' compatibility before adding: http://caniuse.com/#search=vw

More info on viewport sizing: https://css-tricks.com/viewport-sized-typography/

sh3nan1gans
  • 2,246
  • 5
  • 19
  • 23
  • 1
    This is one of the best tips I have seen when using CSS in modern browsers. This is extremely useful and can solve many complex problems. For example, when you have a scrolling div that is wider than the viewport and you want to limit the child div inside this div to a percent of view port width. Thanks a lot. – Sunil Nov 27 '15 at 18:40
27

Just use width: auto;

Difference between width: 100%; and width: auto; is that outer width for 100% is 100% + padding-left + padding-right, inner 100%. Outer width of width: auto is 100%, inner width is 100% - padding-left - padding-right if and only if display is block and no float is set (and no floated element without clear is before).

Boris Šuška
  • 1,796
  • 20
  • 32
  • Thanks, man!One more question, as I set all the items width inside the body tag by percentage, when I zoom in, it seems that those items' width are still the same, but what I wanna do is to make the width of them zoomed in too, how could I achieve this? – chaonextdoor Feb 26 '13 at 18:31
  • You can set only `min-width` property to fixed value eg. `min-width: 320px;`. Set it just for smallest supported `@media` size as a minimum allowed size. You can set `min-width` for any element also, but it is good practice set it always for body because floated elements should change their position. – Boris Šuška Feb 26 '13 at 19:42
  • Doesn't always work. For example if you try to set the bootstrap popover width using this. Use the width: 100vw; below from @sh3nan1gans – Valentine Bondar Jan 02 '16 at 09:34
1

I messed with a lot of different solutions and this is the one that came out best for me.

:root {
Max-width:100%;
}

body { min-height:100vh;
}

From here you’ll add in (max-width:100%;) on each child element from the root. Root sets it as the uppermost parent element causing everything to be able to set to 100% width. If the element above the child element doesn’t have 100% width it won’t apply.

Preston Powers
  • 11
  • 2
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 04 '23 at 10:38