Advertisement
arnabkumar

responsive layout

May 29th, 2014
214
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.17 KB | None | 0 0
  1.                                                              /* Less Framework 4 */
  2.  
  3. /*  Less Framework 4 with 18/24 type presets
  4.     http://lessframework.com
  5.     by Joni Korpi
  6.     License: http://opensource.org/licenses/mit-license.php */
  7.  
  8. /* default layout from main stylesheet */
  9. /* This layout for when less framework */
  10.  
  11.  
  12.  
  13. /* Tablet Layout: 768px. */
  14.  
  15. @media only screen and (min-width: 768px) and (max-width: 991px) {
  16. .column {width:750px}
  17. body{background:#008C46;}
  18. }
  19.  
  20.  
  21.  
  22. /* Mobile Layout: 320px. */
  23.  
  24. @media only screen and (max-width: 767px) {
  25.  body{background:#A64CFF;}
  26.  
  27. .column {width:auto}
  28. }
  29.  
  30.  
  31.  
  32. /* Wide Mobile Layout: 480px. */
  33.  
  34. @media only screen and (min-width: 480px) and (max-width: 767px) {
  35.  body{background:#4CFF4C;}
  36. .column {width:450px}
  37.  
  38. }
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.                                                           /* twitter bootstrap */
  54.  
  55.  
  56. /* This layout for when using bootstrap */
  57.  
  58.  
  59. /* source - http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries */
  60.  
  61.  
  62. /* desktop first method media queries */
  63.  
  64. /* Large desktops and laptops */
  65. @media (min-width: 1200px) {
  66.  
  67. }
  68.  
  69. /* Portrait tablets and medium desktops */
  70. @media (min-width: 992px) and (max-width: 1199px) {
  71.  
  72. }
  73.  
  74. /* Portrait tablets and small desktops */
  75. @media (min-width: 768px) and (max-width: 991px) {
  76.  
  77. }
  78.  
  79. /* Landscape phones and portrait tablets */
  80. @media (max-width: 767px) {
  81.  
  82. }
  83.  
  84. /* Landscape phones and smaller */
  85. @media (max-width: 480px) {
  86.  
  87. }
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96.  
  97.  
  98.  
  99.  
  100.  
  101.  
  102.  
  103. /*==========  Mobile First Method  ==========*/
  104.  
  105.     /* Landscape phones and smaller */
  106. @media (max-width: 480px) {
  107.  body{background:#4CFF4C;}
  108.  
  109. }
  110.  
  111. /* Landscape phones and portrait tablets */
  112. @media (min-width: 480px) and (max-width: 768px) {
  113.  body{background:#A64CFF;}
  114.  
  115.  
  116. }
  117.  
  118.     /* Portrait tablets and small desktops */
  119. @media (min-width: 768px) and (max-width: 991px) {
  120. body{background:#008C46;}
  121. }
  122.  
  123.     /* Portrait tablets and medium desktops */
  124. @media (min-width: 992px) and (max-width: 1199px) {
  125.  body{background:#DFBFFF;}
  126.  
  127. }
  128.  
  129.  
  130.     /* Large desktops and laptops */ /* my desktop */
  131. @media (min-width: 1200px) {
  132. body{background:#DBDBEA;}
  133.  
  134. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement