Tuesday, October 2, 2012

3 ways of inserting CSS media queries

CSS media queries can be added to CSS in all of the ways you're able to define it:

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

Imported stylesheet within the <style> element:
@import "smallscreen.css" only screen and (max-width: 480px);

Within the <style> element as a media rule:
 <style type="text/css">
  @media only screen and (max-width: 480px){
    /* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
  }
</style>

Source from: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

No comments:

Post a Comment