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