Это очень краткий учебник, где мы собираемся поделиться ответом о том, как реализовать отзывчивые стили CSS только на мобильных устройствах. Во многих случаях, мы должны реализовать некоторый CSS код только для мобильных устройств, а не настольной версии веб-сайта, так эта статья поможет вам добавить код CSS только для мобильных устройств.
Ниже код будет охватывать почти все устройства, используемые в данный момент.
@media all and (min-width:960px) and (max-width: 1024px) {
/* укажите здесь ваши стили CSS */
}
@media all and (min-width:801px) and (max-width: 959px) {
/* укажите здесь ваши стили CSS */
}
@media all and (min-width:769px) and (max-width: 800px) {
/* укажите здесь ваши стили CSS */
}
@media all and (min-width:569px) and (max-width: 768px) {
/* укажите здесь ваши стили CSS */
}
@media all and (min-width:481px) and (max-width: 568px) {
/* укажите здесь ваши стили CSS */
}
@media all and (min-width:321px) and (max-width: 480px) {
/* укажите здесь ваши стили CSS */
}
@media all and (min-width:0px) and (max-width: 320px) {
/* укажите здесь ваши стили CSS */
}
Вы можете определить стили CSS для экранов настольной версии (1024px и выше). Всегда добавляйте CSS код настольной версии на начале файла CSS.