CODEWITHSUNDEEP
htmllayoutmobilecssmedia-queries
Doug Fir
Doug Fir

Reputation: 21212

media queries - separate and independent style sheet?

Using media queries in the head of the index html doc, is it possible to tell the visitors browser to use a separate style sheet independently of the original stylesheet?

Currently, what I use uses the mobile_specific stylesheet in addition to the original one which is becoming tricky to style.

<link type="text/css" media="screen" href="styles.css" rel="stylesheet">

<link href="styles_mobile.css" media="only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet">

So syles_mobile.css is used in addition to styles.css. How do I tell the browser to use ONLY "styles_mobile.css" and not both the stylesheets together?

Upvotes: 0

Views: 1555

Answers (1)

Wouter J
Wouter J

Reputation: 41934

Add a media query to the regular stylesheet who is the oposite of your mobile query:

<link rel="stylesheet" href="styles.css" media="only screen and (max-device-width: 480px)">

<link rel="stylesheet" href="styles_mobile.css" media="only screen and (min-device-width: 480px)">

PS: I suggest you to use a standard order of attributes. And the type attribute is not required, as it has a default value of text/css with link and style elements and a default value of text/javascript on script elements.

Upvotes: 3

Related Questions