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


Published on

  • Be the first to comment

  • Be the first to like this

WDEV118 Media Queries

  1. 1. WDEV118Media Queries for Standard Devices
  2. 2. Smartphones (portrait & landscape)@media only screenand (min-device-width: 320px)and (max-device-width: 480px) { /* Styles */}
  3. 3. Smartphones (landscape)@media only screenand (min-width: 321px) { /* Styles */}
  4. 4. Smartphones (portrait)@media only screenand (max-width: 320px) { /* Styles */}
  5. 5. iPads (portrait and landscape)@media only screenand (min-device-width: 768px)and (max-device-width: 1024px) { /* Styles */}
  6. 6. iPads (landscape)@media only screenand (min-device-width: 768px)and (max-device-width: 1024px)and (orientation : landscape) { /* Styles */}
  7. 7. iPads (portrait)@media only screenand (min-device-width: 768px)and (max-device-width: 1024px)and (orientation : portrait) { /* Styles */}
  8. 8. Desktops and Laptops@media only screenand (min-width: 1224px) { /* Styles */}
  9. 9. Large Screens@media only screenand (min-width: 1824px) { /* Styles */}
  10. 10. iPhone 4@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* Styles */}
  11. 11. SupplementalSource: CSS TricksDownload Template
  12. 12. Progressive EnhancementProgressive enhancement is a strategy for webdesign that emphasizes the following:● accessibility● semantic HTML markup● external stylesheet● external scripting technologies
  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.
  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
  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
  16. 16. Progressive EnhancementA mobile first approach follows progressiveenhancement principles.Understanding progressive enhancementtechniques in web design
  17. 17. HTML5 Boilerplate"The web’s most popular front-end template."html5boilerplate.comDownload and incorporate in your next project.
  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.
  19. 19. The Responsinatorresponsinator.comA mobile device simulator20 Examples of Successful Responsive WebDesigns