Как в правиле @media указывать конкретное разрешение,а не только ширину окна? Хочу адаптировать для отдельных девайсов,но не могу понять как
В большинстве случаев подходит такие варианты (от Bootstrap'a):
// Самые маленькие устройства (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Маленькие устройства (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Средние устройства (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Большие устройства (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
Или еще такой вариант (если нужен какой то один конкретный он подойдет больше):
// Самые маленькие устройства (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Маленькие устройства (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Средние устройства (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Большие устройства (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Самые большие устройства (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
В head
добавьте:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
На самом деле вариантов огромное количество, зависит от устройства, Можете найти его здесь
На большом экране у меня должно 6 элеметов в ряд, а на мобильных экранах по одному элементу, но выводится по другомуКак мне исправить данный...
Сделал менюшку в шапке, создал обычные ссылки которые ссылаются к id блоку, но при нажатии скролл не срабатывает и оно просто листается в самый...
При дебаге, страница реагирует только на изменение в html файлеМожно ли как нибудь настроить ide так чтобы она читала подключенные стили в live режиме?
Как сделать так, чтобы модальное окно плагина закрывалось, когда ты нажимаешь только на крестик, а не на области?