Thu, 2013-09-05 18:02
I'm testing a web site at www.trsgraphics.com/brittany/. I'm trying to use multiple media queries for responsive formatting. The project is coming along, but there appears to be a strange twist:it looks like the smartphone and tablet pages are displaying styles from multiple CSS source files. There are other problems with images appearing at unexpected sizes, but that is an issue for another trip through the forums.
The media queries, from the file http://www.trsgraphics.com/brittany/_css/mediaqueries.css, are:
@charset "UTF-8"; /* #### Mobile Phones Portrait #### red*/ @import url("smartphone_portrait.css") screen and (max-device-width: 480px) and (orientation: portrait); /* #### Mobile Phones Landscape #### blue*/ @import url("smartphone_landscape.css") screen and (max-device-width: 640px) and (orientation: landscape); /* #### Mobile Phones Portrait or Landscape #### green*/ @import url("smartphone.css") screen and (max-device-width: 640px); /* #### iPhone 4+ Portrait or Landscape #### yellow*/ @import url("iPhone_4.css") screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2); /* #### Tablets Portrait or Landscape #### pink*/ @import url("tablet.css") screen and (min-device-width: 768px) and (max-device-width: 1024px); /* #### Desktops #### fuchsia*/ @import url("desktop.css") screen and (min-width: 1025px);
I'd be extremely grateful for any advice here. I've noticed this happening before on other projects, but I haven't been able to find a solution anywhere on the web. Also, there appears to be no universally effective method of writing media queries. A dozen differs sites will advocate a dozen different media queries for responsive design, none of which seem to work across the spectrum off devices, even if I am careful to use min-device-width; and set the viewport meta tag: in HTML.
Thu, 2013-09-05 18:07
#1
Web site correcte
Sorry for the confusion. I typed the test site's URL incorrectly (iPads are great, but not especially easy to enter copy with). The website should be www.trsgraphics.com/brittany. I don't know if there is a way to edit a post I have already saved. Hopefully, this comment will help direct any responses to the right place.
Thu, 2013-09-05 23:35
#2
The browser will import all
The browser will import all the stylesheets of the matched queries.
(max-device-width: 480px) will match any device width greater then 480px.
A device width a width of 640px will match (red or blue depending on orientation), and green.
I don't think pink will ever apply as it is looking for devices smaller then 768px and greater then 1024.
There seems to be two main approaches in handling media queries.
A) build up the styles as each query matches.
B) be more specific and use min as well as max.
Sun, 2013-09-08 05:20
#3
Thanks
Thanks very much. I will try min and max width as suggested.