Responsive Media Queries - Where do i put what code?

Question

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

}

Solution 1

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.

Solution 2

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.

Solution 3

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.

Solution 4

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.

View more solutions