Адаптивный дизайн для сайта через @media
Когда нужно сделать адаптив для сайта, то обычно я использую следующие разрешения мониторов:
@media(min-width:0px) and (max-width:320px) {
/* совсем маленькие экраны андроидов */
}
@media(min-width:321px) and (max-width:480px) {
/* популярные разрешения смартфонов уже более позднего поколения андроид */
}
@media(min-width:481px) and (max-width:768px) {
/* телефоны в перевернутом состоянии и некоторые планшеты */
}
@media(min-width:769px) and (max-width:992px) {
/* планшеты */
}
@media(min-width:993px) and (max-width:1200px) {
/* экраны некоторых ноутбуков и некоторых планшетов */
}
Также я использую расширение для хрома Mobile/Responsive Web Design Tester. Это простой инструмент, который помогает тестировать адаптивный дизайн.
Комментарии ()