Responsive Web Design.md (1050B)
1 +++ 2 title = 'Responsive Web Design' 3 +++ 4 # Responsive Web Design 5 - variety of devices (handheld have different screen sizes) 6 - device independence: functional UX via any access mechanism 7 - responsive web design makes a page look good on all devices 8 - solutions 9 - fluid grids — percent instead of pixels 10 - fluid images — max width at 100% 11 - media queries (below 12 13 ## Media queries 14 15 CSS used media types (screen, print, etc.) to target a specific class of devices, but most browsers didn't really implement its functionality 16 17 in CSS3, the W3C included media queries to inspect physical characteristics of the device being used 18 19 either in a `<link>` tag: 20 21 ```html 22 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="stylesheet.css" /> 23 ``` 24 25 or in a `@media` rule inside the actual CSS file: 26 27 ```css 28 @media screen and (max-device-width: 480px) { 29 .column { 30 float: none; 31 } 32 } 33 ``` 34 35 using this stuff, you can disable floats and set the width/margin for specific screen sizes