Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WDEV118 Media Queries

379 views

Published on

  • Be the first to comment

  • Be the first to like this

WDEV118 Media Queries

  1. 1. WDEV118Media Queries for Standard Devices about.me/babon
  2. 2. Smartphones (portrait & landscape)@media only screenand (min-device-width: 320px)and (max-device-width: 480px) { /* Styles */} about.me/babon
  3. 3. Smartphones (landscape)@media only screenand (min-width: 321px) { /* Styles */} about.me/babon
  4. 4. Smartphones (portrait)@media only screenand (max-width: 320px) { /* Styles */} about.me/babon
  5. 5. iPads (portrait and landscape)@media only screenand (min-device-width: 768px)and (max-device-width: 1024px) { /* Styles */} about.me/babon
  6. 6. iPads (landscape)@media only screenand (min-device-width: 768px)and (max-device-width: 1024px)and (orientation : landscape) { /* Styles */} about.me/babon
  7. 7. iPads (portrait)@media only screenand (min-device-width: 768px)and (max-device-width: 1024px)and (orientation : portrait) { /* Styles */} about.me/babon
  8. 8. Desktops and Laptops@media only screenand (min-width: 1224px) { /* Styles */} about.me/babon
  9. 9. Large Screens@media only screenand (min-width: 1824px) { /* Styles */} about.me/babon
  10. 10. iPhone 4@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* Styles */} about.me/babon
  11. 11. SupplementalSource: CSS TricksDownload Template about.me/babon
  12. 12. Progressive EnhancementProgressive enhancement is a strategy for webdesign that emphasizes the following:● accessibility● semantic HTML markup● external stylesheet● external scripting technologies about.me/babon
  13. 13. Progressive EnhancementProgressive enhancement uses webtechnologies in a layered fashion:● allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection ...● while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth. about.me/babon
  14. 14. Progressive EnhancementCore principles:● basic content should be accessible to all web browsers● basic functionality should be accessible to all web browsers● sparse, semantic markup contains all content about.me/babon
  15. 15. Progressive EnhancementCore principles:● enhanced layout is provided by externally linked CSS● enhanced behavior is provided by unobtrusive, externally linked JavaScript● end-user web browser preferences are respected about.me/babon
  16. 16. Progressive EnhancementA mobile first approach follows progressiveenhancement principles.Understanding progressive enhancementtechniques in web design about.me/babon
  17. 17. HTML5 Boilerplate"The web’s most popular front-end template."html5boilerplate.comDownload and incorporate in your next project. about.me/babon
  18. 18. HTML5 BoilerplateTransform your website with HTML5 BoilerplateProbably the single most beneficial factor inmaking a decision to use the HTML5Boilerplate is its built-in IE conditionalcomments that resolve specific IE legacyissues. about.me/babon
  19. 19. The Responsinatorresponsinator.comA mobile device simulator20 Examples of Successful Responsive WebDesigns about.me/babon

×