WDEV118Media Queries for Standard Devices                          about.me/babon
Smartphones (portrait & landscape)@media only screenand (min-device-width: 320px)and (max-device-width: 480px) {  /* Style...
Smartphones (landscape)@media only screenand (min-width: 321px) {  /* Styles */}                           about.me/babon
Smartphones (portrait)@media only screenand (max-width: 320px) {  /* Styles */}                           about.me/babon
iPads (portrait and landscape)@media only screenand (min-device-width: 768px)and (max-device-width: 1024px) {  /* Styles *...
iPads (landscape)@media only screenand (min-device-width: 768px)and (max-device-width: 1024px)and (orientation : landscape...
iPads (portrait)@media only screenand (min-device-width: 768px)and (max-device-width: 1024px)and (orientation : portrait) ...
Desktops and Laptops@media only screenand (min-width: 1224px) {  /* Styles */}                            about.me/babon
Large Screens@media only screenand (min-width: 1824px) {  /* Styles */}                            about.me/babon
iPhone 4@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio : 1.5) {   /* ...
SupplementalSource: CSS TricksDownload Template                     about.me/babon
Upcoming SlideShare
Loading in...5
×

WDEV118 Media Queries

191

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
191
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×