Запросы мультимедиа для стандартных устройств онлайн урок.


Если вы считаете, что отзывчивый просто, я плохо себя чувствую для вас, сын. У нас есть 99 видовых экранов, но iPhone только один.
-Josh Brewer, 10 марта 2010 г.

Основным компонентом гибкого дизайна является создание правильного опыта для правильного устройства. С огромным количеством различных устройств на рынке это может быть высокой задачей. Мы объединили медиа-запросы, которые можно использовать для целевых проектов для многих стандартных и популярных устройств, которые, безусловно, заслуживают внимания.

Если вы ищете полный список медиа-запросов, этот репозиторий является хорошим ресурсом.

Если вы реагируете на это:, вы никогда не должны основывать свои контрольные точки на устройствах!У вас есть хороший момент. У Джастина Эйвери есть хорошая статья о возможных ловушках использования контрольных точек, специфичных для устройства. Выбор точек останова, основанных на вашем дизайне, а не на конкретных устройствах - это разумный способ. Но иногда вам просто нужно немного помочь получить определенную ситуацию под контролем.

Телефоны и КПК

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
{
}

/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
{

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
{
}

/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
{

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
{

}

/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)
{

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
{

}

/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
{

}

/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
{

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
{

}

/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
{

}

/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
{

}

Телефоны Galaxy

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
{

}

/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape)
{

}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
{

}

/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape)
{

}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
{

}

/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape)
{

}

Google Pixel

/* ----------- Google Pixel ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
{

}

/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape)
{

}

/* ----------- Google Pixel XL ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
{

}

/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape)
{

}

Телефоны HTC

/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
{

}

/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape)
{

}
/* ----------- Nexus 4 ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
{

}

/* Portrait */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape)
{

}

/* ----------- Nexus 5 ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
{

}

/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape)
{

}

/* ----------- Nexus 6 and 6P ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 4)
{

}

/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape)
{

}

Windows Phone

/* ----------- Windows Phone ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 480px)
and (device-height: 800px)
{

}

/* Portrait */
@media screen
and (device-width: 480px)
and (device-height: 800px)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 480px)
and (device-height: 800px)
and (orientation: landscape)
{

}

Таблетки

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{

}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1)
{

}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1)
{

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1112px)
and (max-device-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{

}

Галактические планшеты

/* ----------- Galaxy Tab 2 ----------- */

/* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px)
{

}

/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait)
{

}

/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape)
{

}

/* ----------- Galaxy Tab S ----------- */

/* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{

}

/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{

}

Nexus Tablets

/* ----------- Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
{

}

/* Portrait */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape)
{

}

/* ----------- Nexus 9 ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
{

}

/* Portrait */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait)
{

}

/* Landscape */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape)
{

}

Kindle Fire

/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
{

}

/* Portrait */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait)
{
}

/* Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape)
{

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
{

}

/* Portrait */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait)
{
}

/* Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape)
{

}

Ноутбуки

Медиа-запросы для ноутбуков - это немного безжалостно. Вместо таргетинга на определенные устройства попробуйте указать общий диапазон размеров экрана, а затем провести различие между сетчаткой и сетками сетчатки.

/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1)
{
}

/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi)
{
}

Wearables

Да, мы едем туда. Несомненно, они могут пока совсем не квалифицироваться как «стандартные» устройства, но им интересно посмотреть.

Apple Watch

/* ----------- Apple Watch ----------- */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{

}

Moto 360 Watch

/* ----------- Moto 360 Watch ----------- */
@media
(max-device-width: 218px)
and (max-device-height: 281px)
{

}