Владимир

Владимир

+7 (904) 255-66-99
Поиск

Разрешения для адаптивной верстки @media подключения

Статьи 17 января 2016

Ниже представлен перечень медиа подключений для верстки

  1. /* monitors and laptops */
    @media screen and (min-width: 1240px) {} 
  1. /* tablet */
  2. @media screen and (min-width: 1024px) and (max-width: 1240px) {}
  3. @media screen and (min-width: 768px) and (max-width: 1024px) {}
  1. /* mobile */
  2. @media screen and (max-width: 768px) {}
  1. /* iPad in portrait & landscape */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
  1. /* iPad in landscape */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
  1. /* iPad in portrait */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
  1. /* Retina iPad in portrait & landscape */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}
  1. /* Retina iPad in landscape */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio: 2) {}
  1. /* Retina iPad in portrait */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}
  1. /* iPad 1 & 2 in portrait & landscape */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}
  1. /* iPad 1 & 2 in landscape */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
  1. /* iPad 1 & 2 in portrait */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
  1. /* iPad mini in portrait & landscape */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {}
  1. /* iPad mini in landscape */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
  1. /* iPad mini in portrait */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
  1. /* iPhone 5 in portrait & landscape */
    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}
  1. /* iPhone 5 in landscape */
    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}
  1. /* iPhone 5 in portrait */
    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}
  1. /* iPhone 2G-4S in portrait & landscape */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
  1. /* iPhone 2G-4S in landscape */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}
  1. /* iPhone 2G-4S in portrait */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}
Закрыть