×

Welcome to TagMyCode

Please login or create account to add a snippet.
1
0
 
1
Language: CSS
Posted by: Web Designer
Added: May 16, 2015 12:48 AM
Views: 22
Bootstrap 3 Media Queries - two optional methods: mobile first or non-mobile first breakpoints. Both methods are correct.
  1.  
  2. /*==================================================
  3. =            Bootstrap 3 Media Queries             =
  4. ==================================================*/
  5.  
  6.  
  7. /*==========  Mobile First Method  ==========*/
  8.  
  9. /* Custom, iPhone Retina */
  10. @media only screen and (min-width : 320px) {
  11.  
  12. }
  13.  
  14. /* Extra Small Devices, Phones */
  15. @media only screen and (min-width : 480px) {
  16.  
  17. }
  18.  
  19. /* Small Devices, Tablets */
  20. @media only screen and (min-width : 768px) {
  21.  
  22. }
  23.  
  24. /* Medium Devices, Desktops */
  25. @media only screen and (min-width : 992px) {
  26.  
  27. }
  28.  
  29. /* Large Devices, Wide Screens */
  30. @media only screen and (min-width : 1200px) {
  31.  
  32. }
  33.  
  34.  
  35.  
  36. /*==========  Non-Mobile First Method  ==========*/
  37.  
  38. /* Large Devices, Wide Screens */
  39. @media only screen and (max-width : 1200px) {
  40.  
  41. }
  42.  
  43. /* Medium Devices, Desktops */
  44. @media only screen and (max-width : 992px) {
  45.  
  46. }
  47.  
  48. /* Small Devices, Tablets */
  49. @media only screen and (max-width : 768px) {
  50.  
  51. }
  52.  
  53. /* Extra Small Devices, Phones */
  54. @media only screen and (max-width : 480px) {
  55.  
  56. }
  57.  
  58. /* Custom, iPhone Retina */
  59. @media only screen and (max-width : 320px) {
  60.  
  61. }