Question

I am currently trying to design a layout which will be compatible for multiple screen sizes. The screen sizes I am designing for are listed below:

Screen Sizes:

1. 640×480
2. 800×600
3. 1024×768
4. 1280×1024 (and larger)

The thing that I’m having trouble with is creating the css3 media queries, so that my layout changes when the window’s width gets to one of these widths. Below is an example of the media queries I’m currently using, but it is not working for me, so I’m wondering if someone could help me fix it.

<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css">

I tried going with a new set of media queries, but they still aren’t working for me. Could someone please help explain what I’m dong wrong. Several of you have already tried explaining, but I’m not getting it. The new media queries are displayed below:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="css/devices/screen/layout-modify2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px)" href="css/devices/screen/layout-modify4.css">

Answer 1

Unless you have more style sheets than that, you’ve messed up your break points:

#1 (max-width: 700px)
#2 (min-width: 701px) and (max-width: 900px)
#3 (max-width: 901px)

The 3rd media query is probably meant to be min-width: 901px. Right now, it overlaps #1 and #2, and only controls the page layout by itself when the screen is exactly 901px wide.

Edit for updated question:

(max-width: 640px)
(max-width: 800px)
(max-width: 1024px)
(max-width: 1280px)

Media queries aren’t like catch or if/else statements. If any of the conditions match, then it will apply all of the styles from each media query it matched. If you only specify a min-width for all of your media queries, it’s possible that some or all of the media queries are matched. In your case, a device that’s 640px wide matches all 4 of your media queries, so all for style sheets are loaded. What you are most likely looking for is this:

(max-width: 640px)
(min-width: 641px) and (max-width: 800px)
(min-width: 801px) and (max-width: 1024px)
(min-width: 1025px)

Now there’s no overlap. The styles will only apply if the device’s width falls between the widths specified.