Eps 15: Media Queries – Talking HTML

Window Resizer Chrome Extension –  After installing it shows up in the upper right hand corner of your Chrome window at the end of the address bar. It allows you to see the “Viewport Size” and “Window Size” of the current browser window in pixels.
 
This code goes into the HTML
<!– Only use when building media rules –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– End: meta – viewport –>
 
This code goes into the CSS
@media screen and (min-width: 768px) and (max-width: 1024px) {
Write CSS code as normal
}
@media screen and (max-width: 450px) {
Write CSS code as normal
}
* { /*zero-out the default margin and padding on all elements*/
margin: 0;
padding: 0;
}
<link rel=”stylesheet” href=”css/screen.css” media=”screen”>
<link rel=”stylesheet” href=”css/phone.css” media=”screen”>
<link rel=”stylesheet” href=”css/tablet.css” media=”screen”>
 
If you enjoy listening please share with your friends.
Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site.
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw