Некоторые языки программирования допускают изменения, но сопротивляются прогрессу. (Алан.Дж.Перлис)

Как реализовать отзывчивые стили css только на мобильных устройствах

Главное меню » Блог-платформа wordpress » Как реализовать отзывчивые стили css только на мобильных устройствах

29.10.2017

Это очень краткий учебник, где мы собираемся поделиться ответом о том, как реализовать отзывчивые стили 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.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров поста: 21