CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Jacques
Jacques

Reputation: 7135

Responsive Media Queries - Where do i put what code?

This will be my first fully responsive site, so I've looked around and found the basic media queries at the bottom of the post, which seems to match most devices in some way or form.

I started off the code outside of any of these queries (i.e. targeting the average desktop). Then I worked on the first media query for mobile, but the second rule doesn't make sense to me (i.e. everything bigger than 321px).

It seems to mean everything bigger than 321 up to 768 which is the next rule. I think I'm misunderstanding how this is intended to work? Can anyone perhaps explain this in a simple enough way? I'm starting to think that all my CSS code should be inside on of these media queries and that I should haven't started with the mobile version first, then expand it gradually as the resolution gets bigger?

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (orientation: landscape)
{

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) and (orientation: landscape)
{

}

/* Large screens ----------- */
@media only screen and (min-width : 1824px)
{

}

Upvotes: 2

Views: 14029

Answers (6)

РАВИ
РАВИ

Reputation: 12155

Always use media queries for both desktop and mobile because if you don't the entire css will render onto browsers, take up space and slowing down ur webpage (not much, but can get huge if you had a big webapp). So my advice would be set media queries for desktop and for mobile. So when it loads it loads only the media queries pertaining to the specs and nothing extra or useless.

Upvotes: 0

Raydot
Raydot

Reputation: 1576

Mostly just agreeing with what's already been said: you are designing between sizes and not for particular sizes. The most important thing to remember is to lay everything out in percentages and not fixed widths. The upshot of this is that you should really only need three queries: one for desktop, one for tablet and one for mobile.

Upvotes: 1

apaul
apaul

Reputation: 16170

It isn't really necessary to put everything in media queries. A media query will only apply to a device and or screen size that falls within that query.

@media 1 doesn't necessarily effect @media 2.

Note: You can also put your media queries in a comma separated list to save time.

This is how I've done it on my site:

 /* styles for desktops */
 body{width:100%;}

 img{width:100%;} /* and so on */


@media handheld and (max-width: 960px),

screen and (max-width: 960px),

only screen and (min-device-width : 768px) and (max-device-width : 1024px),

only screen and (min-device-width : 320px) and (max-device-width : 480px),

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5)

{
     /*Styles for non desk-tops*/
     /*You Only Need to put styles you want to change in here*/
     img{width:90%;}
}

I hope this helps.

Upvotes: 1

derek_duncan
derek_duncan

Reputation: 1377

The purpose of media queries is to alter elements so they look good a specific window/screen size.
Mobile First design is beginning to become popular. Essentially, the developer creates the website to be optimized(looks and acts best) on mobile devices. Next, he gradually inserts media queries at the end of his css to overwrite the original css. He does this so that the page adjusts to the user's window/screen size, thus resulting in a better experience.

Here is an example:

.ImageGalleryItems {
  float: none;
  clear: both;
  background-color: black;
}
@media only screen and (min-width: 768px) {
  float: left;
  background-color: white;
}

Now, whenever the user's screen size is larger than 768px, the image items will float left rather than display next to each other. Also, the background color will change.

This is the principle you can use. If you develop for mobile first, don't add :hover effects in your original css because those are not employed for mobile devices. Then, use media queries to add in those effects for desktop. This saves data usage and creates cleaner code.

Upvotes: 6

Billy Moat
Billy Moat

Reputation: 21050

That's quite a few media queries - I'd think about whether or not you really need all of those.

You can approach these from mobile first or desktop first. Makes no difference really.

I'd recommend having a look at what media queries Bootstrap use as their defaults.

http://twitter.github.com/bootstrap/scaffolding.html#responsive

Upvotes: 0

AntonNiklasson
AntonNiklasson

Reputation: 1749

I think you are overdoing it a bit. Reduce the number of Media queries and add some breakpoints where your design "breaks" in some way.

Considering what to put in the queries: one way is writing some form of general CSS, and then overwriting some properties inside media queries. Another way is to simply skip the "alternating" property in your general CSS and setting it inside each of the queries.

So: you do not write ALL your CSS inside media queries. Just the things you want to change.

Upvotes: 2

Related Questions