Virajsinh

Browser Resolution Solution CSS

Dec 16th, 2019
49
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style type="text/css">
  2.     /* default styles here for older browsers.
  3.        I tend to go for a 600px - 960px width max but using percentages
  4.     */
  5.     @media only screen and (min-width: 960px) {
  6.         /* styles for browsers larger than 960px; */
  7.     }
  8.     @media only screen and (min-width: 1440px) {
  9.         /* styles for browsers larger than 1440px; */
  10.     }
  11.     @media only screen and (min-width: 2000px) {
  12.         /* for sumo sized (mac) screens */
  13.     }
  14.     @media only screen and (max-device-width: 480px) {
  15.        /* styles for mobile browsers smaller than 480px; (iPhone) */
  16.     }
  17.     @media only screen and (device-width: 768px) {
  18.        /* default iPad screens */
  19.     }
  20.     /* different techniques for iPad screening */
  21.     @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  22.       /* For portrait layouts only */
  23.     }
  24.  
  25.     @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  26.       /* For landscape layouts only */
  27.     }
  28. </style>
  29.  
  30. @media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
  31. @media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
  32. @media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
  33. @media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
  34. @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
  35. @media (min-width:1281px) { /* hi-res laptops and desktops */ }
RAW Paste Data