С помощью данного способа, вы сможете быстро настроить CSS для различных устройств.

В любой файл стилей или в тег <style> добавляем такой CSS код:

/*Стили только для смартфонов*/
@media screen and (max-device-width:480px){
ТУТ_СТИЛИ
}
/*Стили только для планшетов*/
@media screen and (min-device-width:481px){
ТУТ_СТИЛИ
}
/*Стили только для десктопов*/
@media screen and (min-width:769px){
ТУТ_СТИЛИ
}
/*Стили только для Ipad (горизонтальное положение)*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
ТУТ_СТИЛИ
}
/*Стили только для Ipad (вертикальное положение)*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
ТУТ_СТИЛИ
}

P.S. Лично я использую только первый вариант “Стили только для смартфонов”, он помогает настроить CSS под все телефоны.

Понравилась статья? Расскажи друзьям!

Комментарии

Отправить комментарий

avatar
wpDiscuz
Авторизация
*
*
Регистрация
*
*
*
Генерация пароля