WDEV118 Media Queries

368 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
368
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×