CSS — правила для создания адаптивной страницы

Ниже представлен снипет кода или скелетон адаптивности CSS, для основных экранов. Как правило, это все делается при помощи ключевого слова @media, с указанием правила изменения свойств для охватываемого экрана, входящего в предел между min-width и max-width

@media (min-width: 360px) and (max-width: 374px) {
    /**Galaxy S*/
}
@media (min-width: 375px) and (max-width: 411px) {
    /**iPhone 7,iPhone 8, iPhone X*/ 
}
@media (min-width: 412px) and (max-width: 767px) {
    /**iPhone 7 Plus,iPhone 8 Plus, Nexus 5X, Nexus 6P*/
}
@media (min-width: 768px) and (max-width: 1023) {
    /**iPad*/
}
@media (min-width: 1024px) and (max-width: 1279) {
    /**iPad Pro*/
}
@media (min-width: 1280px) and (max-width: 1365) {
    /**-*/
}
@media (min-width: 1366px) and (max-width: 1599) {
    /**-*/
}
@media (min-width: 1600px) and (max-width: 1920) {
    /**-*/
}

 

Вам также может понравиться

Об авторе WebSofter

Web - технологии

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...