![\"CSS3](\"http:\/\/www.crimsondesigns.com\/blog-images\/css3-media-queries.jpg\")
<\/p>\nWith CSS3 media queries, we can write CSS that\u00a0delivers an optimal web experience for visitors viewing our websites at\u00a0different screen sizes.\u00a0CSS3 media queries also help\u00a0us fine-tune our designs for our ever-expanding mobile audience. Let’s take a look at the details.<\/p>\n
<\/p>\n
If a\u00a0visitor\u00a0has a web browser that supports media queries (IE9 and above), we can write CSS specifically for certain situations. For example, we can detect that a visitor\u00a0has a small device like a smart phone and give them a specific layout.<\/p>\n
<\/p>\n
We can add specific CSS for small screens or large screens (inside our cascading stylesheets). By putting our CSS media queries in the bottom of our stylesheets, we can simply overwrite any styles rules we have declared\u00a0earlier in our CSS.<\/p>\n
A media query consists of 3 Parts:<\/strong> the Media Type, an Expression, and the Style Rules contained within the media query itself.<\/p>\n We can have a bunch of pencils in a box and several\u00a0boxes in a drawer. Let’s think of the CSS stylesheet that holds everything as the drawer.<\/p>\n Of course, there may be some pencils in the drawer that are not inside the pencil boxes. So not every CSS Rule has to be in the CSS Media Queries, only the ones that are targeting specific browser widths etc..<\/p>\n h3 {color: red;}<\/p>\n<\/div>\n We can add color to our website with the CSS Style Rule above. Here we\u00a0are making all our h3 headings red.\u00a0Then we can limit that color to small screens, if we like, by wrapping that style rule in a\u00a0CSS Media Query.<\/p>\n @media screen and (min-width: 800px) {<\/p>\n h3 {color: red;}<\/p>\n }<\/p>\n<\/div>\n There are two ways to call a media query: using an external stylesheet, or writing directly inside a stylesheet.\u00a0The syntax of a media query is the same no matter if you use it inside a link element, after an @import instruction, or inside a CSS stylesheet.<\/p>\n One way to use media queries is to include them inside your single stylesheet.\u00a0You can use a media query to add a breakpoint at 768px and target a computer screen.<\/p>\n We can add breakpoints so that\u00a0certain parts of our\u00a0design will behave differently on each side of the breakpoint.\u00a0Common breakpoints include the 320px (for smartphones), 768px (for tablets), and 1024px (for desktop monitors).<\/p>\n You can compose complex media queries using logical operators, including not,<\/strong> and,<\/strong> and only.<\/strong> You can also combine multiple media queries in a comma-separated list;<\/strong> if any of the media queries in the list is true, the entire media statement returns true. (This is equivalent to an or<\/strong> operator.)<\/p>\n The AND\u00a0operator is the one you’ll probably use the most. It is used for combining multiple media features together into a single media query. It requires that all conditions specified must be met before the styling rules will take effect.<\/p>\n Here is a media query\u00a0example\u00a0containing the AND operator:<\/p>\n (NOTE: CSS Style Rules are not included in the above example (so it actually does nothing). But they are shown in the ones below.)<\/p>\n<\/div>\n Media Query Examples with CSS Rules inside (highlighted in red):<\/p>\n @media (min-width: 768px) {<\/p>\n body { }<\/p>\n<\/div>\n @media only screen and (min-width: 601px) and (max-width: 1200px) {<\/p>\n body { background: yellow; } }<\/p>\n<\/div>\n<\/div>\n In the last\u00a0example, the two CSS rules inside the body of the media query will only be applied if the browser window width is at or between 601 pixels and 1200 pixels.<\/p>\n Media Queries include “curly braces.” CSS style rules also include \u201ccurly braces,\u201d so you will see CSS \u201ccurly braces\u201d nested inside media query \u201ccurly braces.\u201d<\/p>\n (IMPORTANT: Don\u2019t forget to include all the curly braces. If you miss one, you may\u00a0have unexpected results in the browser. Curly braces can be written on\u00a0different lines, such as\u00a0in the first example or made more compact, such as in the second example. Just be sure they are nested correctly<\/strong> inside the media query curly braces.)<\/p>\n In summary, basic CSS3 media queries are actually simple to learn and easy to add to cascading stylesheets to target different web devices or screen sizes. They just take a little practice.<\/p>\n To learn more about CSS Style Rules, see\u00a0Smooth Strides from CSS to CSS3<\/a>.<\/p>\n\n\n
Colored Pencils, Pencil Boxes and Drawers<\/h3>\n
![\"CSS3](\"http:\/\/www.crimsondesigns.com\/blog-images\/website-color-with-css.jpg\")
Let’s think of Each CSS Style Rule as a colored pencil, since we often use CSS Style Rules to add color to a website.\u00a0Let’s think of CSS3 Media Queries as a box that holds the\u00a0colored pencils.<\/p>\nHere’s a CSS Style Rule Example (the colored pencil):<\/h4>\n
\nHere’s the CSS3 Media Query (the pencil box)
\nwith a CSS Style Rule inside (the colored pencil).<\/h4>\n\nCalling Media Queries<\/h3>\n
@media only screen and (max-width: 768px) { …\u00a0}<\/div>\nBreakpoints<\/h3>\n
Complex Expressions<\/h3>\n
AND (and keyword)<\/h4>\n
\n@media (min-width:800px) and (max-width:1200px) { … }<\/div>\n\n\n
\nmargin: 0 auto;
\nmargin-top: 20px;
\n}<\/p>\n\n
\nh3 {color: red;}<\/p>\n![\"CSS3](\"http:\/\/www.crimsondesigns.com\/blog-images\/media-queries-and-css-style-rules.jpg\")
<\/p>\n