Пример (ошибочная последовательность файлов + JS, который дополнительно перезаписывает стили):
HTML
```html
```
css/responsive.css
```css
/* mobile-first: базовые (мобильные) стили */
.container { max-width: 100%; padding: 16px; }
.sidebar { display: none; }
/* для больших экранов показываем сайдбар */
@media (min-width: 768px) {
.sidebar { display: block; width: 300px; }
}
```
css/desktop-override.css
```css
/* загружается ПОСЛЕ responsive.css и без медиа-запроса ломает мобильную верстку */
.sidebar { display: block; width: 960px; }
.container { width: 960px; } /* перезаписывает мобильную адаптивность */
```
js/fix-width.js
```js
// JS ставит inline-стиль — имеет приоритет над CSS и ломает адаптивность
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.container').style.width = '960px';
});
```
Почему ломает
- В каскаде CSS правило, загруженное позже с одинаковой специфичностью, побеждает — поэтому `desktop-override.css` переписывает мобильные правила.
- Inline-стили из JS имеют более высокий приоритет и полностью игнорируют медиа-запросы CSS.
Методика поиска и исправления (коротко)
1) Воспроизведите проблему на мобильном/в эмуляторе DevTools.
2) Откройте DevTools → Elements → выбранный элемент → вкладка Styles/Computed и смотрите, какое правило устанавливает ширину/отображение, откуда оно (файл:строка).
3) В Styles видно перекрытые правила и порядок — найдите правило, которое загружено ПОСЛЕ ваших адаптивных правил или inline-стиль.
4) Проверка сети: Network → убедиться в порядке загрузки `` (файлы загружаются в том порядке, в котором указаны).
5) Отключите подозрительный файл (или JS) в DevTools, чтобы подтвердить причину.
Исправления
- Правильный порядок: сначала базовые (mobile-first) стили, затем декларации для больших экранов в виде @media или отдельный файл с медиа-запросами, но этот файл должен быть загружен ДО/или содержать медиа-условия, чтобы не переопределять мобильные правила некорректно. Либо объединять стили и размещать медиа-запросы после базовых правил.
- Не ставьте глобальные фиксированные ширины без медиа-запросов. Замените `width: 960px;` на правило внутри `@media (min-width: 768px) { ... }`.
- Уберите inline-стили из JS; если нужны динамические изменения, меняйте классы или используйте `matchMedia` и назначайте классы условно.
- Если нужно аварийно перекрыть правило, используйте более высокую специфичность или `!important` осознанно, но лучше организовать порядок и медиа-запросы правильно.
Короткий чек-лист (шаги) для отладки: $1$ воспроизвести → $2$ инспектировать computed/styles → $3$ найти источник (файл/строка/inline) → $4$ отключить/переупорядочить файлы → $5$ внести исправления (медиа-запросы/классы/удалить JS-inline) → $6$ протестировать.