CSS Media Query Import for mobile

Question

I think I am confusing myself here. Being a bit green at responsive designs, I am trying to import 1 of 2 stylesheets based on the viewed width of the site.

However, when using the below, both seem to pull down when viewed in Firebug.

Is this correct? What am I doing wrong?

What I'd like to achieve is, if the browser width is less than 940px, then pull responsive.css, if it's bigger than that, pull full.css

I'm already including the respond.js library https://github.com/scottjehl/Respond

@import url("/inc/Styles/full.css") (min-width: 940px);
@import url("/inc/Styles/responsive.css") (max-width: 940px) and (min-width: 100px);

You're better off just including all of the rules in a single css file and serve that up Gzip compressed than worry about loading two files. — justinavery, Jan 26 '13 at 00:44

score 5 · Accepted Answer · answered Jan 25 '13 at 00:25

5

Yes, that is correct, and no, you're not doing anything wrong that I can tell. I think you're overthinking it (and you really don't need the min-width on the second import).

If you haven't already, read Ethan Marcotte's Responsive Web Design.

answered Jan 25 '13 at 00:25

Phire

398
2
7

i probably am over thinking it =) – Kevin Jan 28 '13 at 18:05
The info from the link is useful~ – mintedsky Jan 31 '15 at 23:42

score 1 · Answer 2 · edited May 23 '17 at 12:14

Seperated css files (calling by @import) always load by browser naturally. Media Query can not solve that issue. To be able to pull just related css files you need to use more than CSS.

You can handle that problem both server or client site. For instance you can use 51degrees library for .NET

or you can use a javascript window size dedector to get the window width value and call that spesific css via AJAX or create a link element via JS.

Bascially;

$(function(){ 
          if($(window).width() > 980){ 
              // your code etc.
          } else{ 
              // your code etc.
          }  
     });

Also Check here How to apply inline and/or external CSS loaded dynamically with jQuery

CSS Media Query Import for mobile

2 Answers2