Размеры экранов для адаптивной верстки

Здесь я приведу несколько сниппетов для адаптивной верстки, в котором расписаны наиболее распространенные размеры дисплеев. Начнем с малого

1. Смартфоны (Портрет и ландшафтный)
Код
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}


2. Смартфоны (ландшафтный)
Код
@media only screen and (min-width : 321px) {}


3. Смартфоны (portrait)
Код
@media only screen and (max-width : 320px) {}


4. iPads (Портрет и Ландшафтный)
Код
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}


5. iPads (Ландшафтный)
Код
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}


6. iPads (Портрет)
Код
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}


7. Настольные компьютеры и ноутбуки
Код
@media only screen and (min-width : 1224px) {}


8. Настольные компьютеры и ноутбуки
Код
@media only screen and (min-width : 1224px) {}


9. Большие экраны
Код
@media only screen and (min-width : 1824px) {}


10. iPhone 4
Код
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}


Для проверки все этих возможностей я приведу к примеру 2 ресурса которыми сам пользуюсь.

https://quirktools.com/screenfly/
http://mattkersley.com/responsive/

Дерзайте!

  • FalleN

  • 20024

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!