3 replies [Last post]
TOSONA1959
TOSONA1959's picture
Offline
newbie
Washington, D.C.
Last seen: 6 years 9 weeks ago
Washington, D.C.
Timezone: GMT-4
Joined: 2013-09-05
Posts: 3
Points: 4

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.

TOSONA1959
TOSONA1959's picture
Offline
newbie
Washington, D.C.
Last seen: 6 years 9 weeks ago
Washington, D.C.
Timezone: GMT-4
Joined: 2013-09-05
Posts: 3
Points: 4

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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.

@media test page

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.

TOSONA1959
TOSONA1959's picture
Offline
newbie
Washington, D.C.
Last seen: 6 years 9 weeks ago
Washington, D.C.
Timezone: GMT-4
Joined: 2013-09-05
Posts: 3
Points: 4

Thanks

Thanks very much. I will try min and max width as suggested.