CODEWITHSUNDEEP
cssmedia-queries
chaonextdoor
chaonextdoor

Reputation: 5139

How to make the body width equal to the device-width automatically in CSS3 media query?

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" />

Upvotes: 25

Views: 63344

Answers (3)

Preston Powers
Preston Powers

Reputation: 11

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.

Upvotes: 1

sh3nan1gans
sh3nan1gans

Reputation: 2356

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/

Upvotes: 44

Boris Šuška
Boris Šuška

Reputation: 1794

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

Upvotes: 27

Related Questions