Advertisement
krot

media_screen

Sep 21st, 2017
283
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.13 KB | None | 0 0
  1. min-width   Правило применяется к браузеру, ширина которого больше значения, указанного в запросе.
  2. max-width   Правило применяется к браузеру, ширина которого меньше значения, указанного в запросе.
  3. min-height  Правило применяется к браузеру, высота которого больше значения, указанного в запросе.
  4. max-height  Правило применяется к браузеру, высота которого меньше значения, указанного в запросе.
  5. orientation=portrait    Правило применяется к браузеру, высота которого не меньше его ширины.
  6. orientation=landscape   Правило применяется к браузеру, ширина которого больше высоты.
  7. https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=ru
  8.  
  9. /* monitors and laptops */
  10. @media screen and (min-width: 1240px)  {}
  11.  
  12. /* tablet */
  13. @media screen and (min-width: 1024px) and (max-width: 1240px)  {}
  14.  
  15. @media screen and (min-width: 768px) and (max-width: 1024px) {}
  16.  
  17. /* mobile */
  18. @media screen and (max-width: 768px) {}
  19.  
  20. /* iPad in portrait & landscape */
  21. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {}
  22.  
  23. /* iPad in landscape */
  24. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
  25.  
  26. /* iPad in portrait */
  27. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
  28.  
  29. /* Retina iPad in portrait & landscape */
  30. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}
  31.  
  32. /* Retina iPad in landscape */
  33. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
  34. and (-webkit-min-device-pixel-ratio: 2) {}
  35.  
  36. /* Retina iPad in portrait */
  37. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}
  38.  
  39. /* iPad 1 & 2 in portrait & landscape */
  40. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}
  41.  
  42. /* iPad 1 & 2 in landscape */
  43. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {}
  44.  
  45. /* iPad 1 & 2 in portrait */
  46. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
  47.  
  48. /* iPad mini in portrait & landscape */
  49. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  {}
  50.  
  51. /* iPad mini in landscape */
  52. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {}
  53.  
  54. /* iPad mini in portrait */
  55. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {}
  56.  
  57. /* iPhone 5 in portrait & landscape */
  58. @media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}
  59.  
  60. /* iPhone 5 in landscape */
  61. @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}
  62.  
  63. /* iPhone 5 in portrait */
  64. @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}
  65.  
  66. /* iPhone 2G-4S in portrait & landscape */
  67. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
  68.  
  69. /* iPhone 2G-4S in landscape */
  70. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}
  71.  
  72. /* iPhone 2G-4S in portrait */
  73. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement