Media Queries to select different 960 gs

Question

I am using the following code below to select different css files depending on the size of the window of my browser. However the first one doesn't seem to work when I resize the window to that size, even if I refresh the page. I am not sure what I should be doing to fix this. Thanks.

@import url("css/960.css") screen and (max-device-width: 1200px);
@import url("css/2520.css") screen and (max-device-width: 2560px);

Answer 1

Taking a guess here but I don't think it will work because you are using max-device-width and not max-width.

device-width is the virtual pixels a device is capable of displaying.

Device-width (Mozilla) - Describes the width of the output device (meaning the entire screen or page,
rather than just the rendering area, such as the document window).

I don't think you can fake that with changing the size of a browser window.

max-width on the other hand is a measurement of the actual viewport displayed in the browser.

Width (Mozilla) - The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

So your options are either try using max-width:

@import url("css/960.css") screen and (max-width: 1200px);
@import url("css/2520.css") screen and (max-width: 2560px);

or try using some kind of device simulator like an iPad simulator or an actual device to test that your media queries are working properly.