CSS для разных устройств

responsive design

С помощью данного способа, вы сможете быстро настроить 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 под все телефоны.

Похожие материалы

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

Оставить заявку

Мы свяжемся с вами в ближайшие время