Проверь что ты задал стиль для img

Размер

В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. Пиксел — это элементарная точка на экране монитора, является относительной единицей измерения, ее величина зависит от установленного экранного разрешения и размера монитора. Возьмем, к примеру, популярное разрешение монитора 1024х768 пикселов. Картинка с такими же размерами будет занимать всю область экрана. Увеличив разрешение монитора до 1280х1024, мы, тем самым, уменьшим размеры изображения на экране.

При использовании пикселов в качестве значений пишется только число без указания единиц, например: width=»380″ . В примере 6.2 приведено добавление изображения с заданными размерами.

Пример 6.2. Размеры изображения в пикселах

В данном примере рисунок имеет ширину 100 пикселов ( width=»100″ ), высоту 111 пикселов ( height=»111″ ), горизонтальный и вертикальный отступ по 4 пиксела ( hspace и vspace ) и толщину границы вокруг картинки 2 пиксела ( border=»2″ ).

Процентная запись удачно дополняет пикселы, поскольку позволяет привязаться к размерам определенного элемента, к примеру, окна браузера. Так, если задать у картинки ширину 100%, то рисунок будет заполнять все свободное пространство окна по ширине. Браузер понимает, что речь идет о процентах, если после числа добавляется символ %, например: width=»40%» .

Размеры допустимо задавать только в целых числах. Это правило относится как к пикселам, так и процентам.

Учтите, что размер в процентах вычисляется от размеров родительского элемента, иными словами, контейнера, внутри которого располагается элемент. Если родитель явно не задан, тогда за отсчет принимается окно браузера. В примере 6.3 приведен код веб-страницы, в котором ширина элементов задается в процентах.

Пример 6.3. Размеры изображения в процентах

В данном примере ширина картинки задана как 100%, при этом высота изображения явно не задается, поскольку она вычисляется автоматически. Вид страницы при таких размерах картинки показан на рис. 6.3.

Рис. 6.3. Изображение с шириной 100%

Обратите внимание, что в изображении появляются заметные искажения, это связано с увеличением картинки вопреки ее исходным размерам.

Как вы понимаете, ширина окна принимается за 100%, но ее легко превысить, причем ненароком. В частности, стоит только добавить в примере 6.3 к тегу отступы по горизонтали ( hspace=»10″ ) и ширина изображения станет 100%+20. Это в свою очередь приведет к появлению горизонтальной полосы прокрутки. Учитывайте этот нюанс при установке размеров элементов.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Популярные задачи

• TEX
• Отступы между блоков
• Андроид в тени
• Ссылка как кнопка
• Вложенные списки
• Форма регистрации
• Объединение ячеек таблицы
• Обязательные поля формы
• Цвет и фон в таблице
• Асуанская плотина
• Батарейка
• Заголовки

Задавать Height и Width для изображений снова важно

Сторонники веб-оптимизаций часто советуют добавлять к изображениям атрибуты с размерами, что позволяет при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения. Это позволяет избежать смещения раскладки страницы по мере загрузки изображений — что с недавних пор начал измерять Chrome в новой метрике Cumulative Layout Shift (CLS).

Секрет, не так хорошо известный разработчикам, не являющимся заядлыми сторонниками веб-производительности, заключается в том, что до недавнего времени, как мы увидим ниже, во многих случаях это фактически не имело особого смысла. Однако, недавние изменения в мире CSS и их быстрое внедрение в браузерах снова делает добавление атрибутов width и height к тегу полезным.

Почему добавление Width и Height было хорошим советом

Your title
 
Introductory paragraph.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Эта страница будет отрисовываться в два этапа: первый — после загрузки HTML, второй — после загрузки изображения. Но это может привести к тому, что после загрузки изображения и вычисления необходимого для его отображения пространства, содержимое, расположенное под ним, «прыгнет» вниз:

Подобные смещения раскладки доставляют существенные неудобства, особенно если пользователь к этому моменту уже начал, например, читать статью. После смещения он будет вынужден снова искать место, на котором остановился. Также это добавляет работы браузеру, вынуждая его пересчитывать всю раскладку страницы по мере загрузки каждого изображения. На страницах с большим количеством изображений это может существенно нагружать устройство.

Традиционным способом избежать этого была установка для тега атрибутов width и height , чтобы ещё на этапе загрузки одного лишь HTML браузер мог выделить для изображений необходимое количество места. Сделаем это в следующем примере:

Your title
 
Introductory paragraph.
 
Lorem ipsum dolor sit amet, consectetur…

В результате отрисовка страницы будет происходить так, как указано ниже. Пространство, необходимое изображению, выделяется ещё до его загрузки, а когда это происходит, раскладка страницы не смещается.

Кроме раздражающих пользователя скачков, необходимость многократно перерисовывать страницу также может приводить к существенному увеличению нагрузки на процессор. На приведённом ниже скриншоте отображены расчёты производительности, выполненные в браузере Chrome на сайте с галереей, содержащей около 100 изображений. Показатели слева были достигнуты при наличии атрибутов width и height , справа — при их отсутствии.

Как вы могли заметить, влияние существенное — это будет особенно заметно на маломощных устройствах и при низкой скорости подключения. Время загрузки страницы будет существенно увеличено.

Как CSS работает с шириной и высотой элемента

При попытке менять ширину и высоту изображения с помощью CSS, могут возникать неожиданные проблемы. Например, если нужно ограничить ширину, может использоваться следующий код:

Когда в этом возникает потребность, значение width переопределяется и ширина изображения ограничивается. Но если для тега через атрибут height также задана и высота, она не будет переопределена и изображение в итоге получится вытянутым по высоте и сжатым по ширине, поскольку соотношение сторон картинки больше не сохраняется.

На самом деле, это очень легко исправить, добавив в CSS свойство height: auto , чтобы также переопределить значение заданного в HTML атрибута height .

Однако, не для всех этот факт является очевидным и думаю, что порой именно из-за такого поведения разработчики избегают задания размеров через HTML. Если в атрибутах изображения размеры не заданы, в CSS можно просто указать max-width: 200px , при этом явно не указывая height: auto , и браузер сам рассчитает нужную высоту, как только изображение загрузится.

Следовательно, если мы добавляем размеры через HTML-атрибуты и при этом используем трюк height: auto , то получаем лучшее из обоих миров, так? Раскладка страницы не смещается, но остаётся возможность менять размер через CSS. Что ж, возможно вы будете удивлены (я был удивлён, поэтому и решил написать эту статью), но до недавнего времени это было не так.

Для примера, рассмотрим код ниже:

 img 
Your title
 
Introductory paragraph.
 
Lorem ipsum dolor sit amet, consectetur…

В данной ситуации загрузка будет происходить следующим образом:

Погодите-ка, что здесь происходит? Мы вернулись к первой проблеме. Я же говорил, что указывая размеры изображения в HTML, можно избежать проблем со смещением элементов страницы. Становится интересно. Мы переходим к основной части данной статьи.

Проблема в том, что если в CSS в свойствах width и height задаётся не фиксированное значение (а в наше время адаптивности фиксированные значения и не используются), при рендеринге страницы возникает потребность получить размеры изображения из самого файла, прежде чем размеры сторон смогут быть посчитаны. При этом атрибуты width и height , заданные в HTML, игнорируются.

Следствием всего этого является то, что на деле задавать атрибуты для изображений нередко оказывается не настолько важным. Да, когда изображение показывается в полный размер без изменения его размеров с помощью CSS, полезно решить проблему смещения раскладки. Однако, когда используется CSS-код, целью которого является, например, предотвращение переполнения изображением доступного пространства, вы столкнётесь с проблемами.

Это влияет на любую страницу, на которой мы ограничиваем размер изображения адаптивным образом — например, устройства с маленьким экраном. Именно эти пользователи больше всего пострадают от смещения раскладки, поскольку используют менее мощные устройства и интернет с низкой скоростью. Конечно, в идеале мы должны для экрана каждого размера предоставить соответствующее изображение, но охватить все варианты не получится, поэтому изображения будут нуждаться в изменении размера браузером, в особенности для мобильных устройств.

На многих веб-сайтах атрибуты width и height для тегов не указываются. Это может происходить из-за того, что разработчики не знают об их пользе, или наоборот знали о том, что в большинстве случае в этом мало смысла. Какова бы не была причина, это встречается. Но как мы можем агитировать за это, если даже популярный инструмент аудита Lighthouse не считает данный момент ошибкой (хотя в свете некоторых моментов, о которых мы поговорим, уже обсуждается добавление данной оценки).

Решение проблемы

Ограничения для адаптивных изображений давно известны и были найдены способы решения этой проблемы, в том числе хак с использованием padding-bottom. В нём используется тот факт, что значение для свойства padding , заданное в процентах, всегда высчитывается из ширины родительского контейнера. Следовательно, это можно использовать для создания контейнера, высота которого будет пропорциональна его ширине. Например, у нас есть изображение с соотношением сторон 16:9, тогда следующий код создаст для этого изображения контейнер соответствующего размера.

.img-container < position: relative; padding-bottom: 56.25%; /* соотношение 16:9 */ height: 0; overflow: hidden; >.img-container img

У данной техники есть три основных проблемы:

1. Она требует ручного расчёта и перевода в проценты значения (например, для соотношения 16/9 нужно 9÷16*100 = 56.25% ), что потенциально требует отдельного CSS-правила для каждого соотношения сторон.
2. Запомнить набор всех необходимых свойств непросто — если забыть добавить или случайно удалить какую-то строку кода из примера выше, всё сломается. Не говоря уже о том, что эта техника требует, чтобы все изображения были обёрнуты в дополнительный элемент-контейнер.
3. Данный подход известен и используется не всеми веб-разработчиками.

И давайте будем честны — это хак. И нам следовало бы писать код без его использования.

Проблема фиксированного соотношения сторон

Описанная выше проблема рассматривалась несколькими организациями по стандартизации.

Рабочая группа CSS (CSS Working Group) предложила свойство aspect-ratio , о котором писала Rachel Andrew. Как только браузеры начнут поддерживать его, будет решена проблема сложности кода и пример выше будет упрощён до следующего вида:

Намного лучше! Это особенно полезно для видео, где нам обычно доступен набор часто используемых соотношений сторон, позволяя создать несколько классов для каждого размера. Возможно, это менее полезно для изображений, где размеры менее стандартизированы, из-за чего остаются нерешёнными ни проблема №1 с необходимостью отдельного CSS-правила для каждого изображения, ни проблема №3 с необходимостью разработчикам не забывать применять этот код. Следовательно, это шаг вперёд, но пока что не решение всех проблем.

Помимо этого, Web Incubator Community Group (WICG) — группа разработчиков браузеров и других заинтересованных сторон, способных экспериментировать с технологиями ещё до формальной стандартизации — также предложили свой вариант решения. Речь об атрибуте intrinsicsize , который в коде выглядит следующим образом:

Так как это HTML-атрибут, он может быть установлен для каждого изображения (решая проблему №1 с необходимостью отдельного CSS-правила для каждого изображения) и относительно легко задаётся (решая проблему №2 с необходимостью запоминать большой объем кода), но всё ещё остаётся актуальной проблема с популярностью, если только сообщество не станет активно его продвигать.

У нас уже есть распространённый, хорошо известный метод установки width и height для элементов (даже если он не используется так часто, как хотелось бы), поэтому другие подобные решения неизбежно будут испытывать проблемы с принятием. И вот тут сам собой появляется ответ (теперь кажущийся очевидным).

Вместо введения фиксированного значения свойства aspect-ratio , здесь используется CSS-функция attr , чтобы задать соотношение сторон, соответствующее атрибутам width и height , заданным в HTML. Функция attr уже некоторое время существует, но имеет очень ограниченную область применения — все браузеры поддерживают её при использовании в свойстве «content», например, content: attr(width) . Но для других свойств это ещё не реализовано.

Если бы функция attr работала и в других свойствах, с её помощью можно было получать значение атрибутов width и height и использовать для расчёта значения свойства aspect-ratio , как в примере выше. Это решило бы проблему №1 (не требовалось бы вручную задавать соотношение сторон ни в HTML, ни в CSS), проблему №2 (небольшой объем кода для запоминания) и, как мы увидим дальше, это очень простое решение проблемы №3 (принятие разработчиками).

По сути, это решение значит, что если следующие четыре условия соблюдены, то правильные размеры изображения могут быть вычислены без необходимости ждать загрузки изображения, а значит и без риска смещения раскладки:

• для элемента задан HTML-атрибут height
• для элемента задан HTML-атрибут width
• height (или width ) задаётся в CSS — в том числе, с использованием процентных значений вида max-width: 100%
• width (или height ) устанавливается на auto в CSS

Если какое-то из них не было задано, вычислить значение будет невозможно, а следовательно, будет проигнорировано с дальнейшим ожиданием загрузки изображения.

Как только браузеры смогут использовать width и height для определения соотношения сторон изображения, мы сможем решить проблему, практически не меняя HTML и с помощью одной строки CSS-кода. Как упоминалось выше, возможно, некоторые разработчики считают, что это происходит уже сейчас.

Стимулирование использования этого решения

Поскольку предложенное решение — это просто работа CSS-стилей, в итоге пришли к тому, что его можно было просто добавить в таблицу стилей браузера, что не требовало бы от разработчиков никаких усилий для получения преимуществ.

Таблица стилей браузера — место, где заданы CSS-стили по умолчанию (например, какой font-size у элемента h1 ). При необходимости, их можно переопределить собственными правилами оформления. Добавляя вышеупомянутое свойство aspect-ratio , нам не нужно стимулировать использование этого решения разработчиками — мы, по сути, автоматически включаем его для всех сайтов, которые соответствуют четырём указанным выше условиям.

Однако, это зависит от функции attr , имеющей доступ к HTML-атрибутам width и height , и от свойства aspect-ratio — ни то, ни другое ещё полностью браузерами не поддерживается. Поэтому вместо этого, в качестве более простого решения, браузеры могут заложить такое поведение в коде рендеринга страницы, а не раскрывать его в таблицах стилей браузера, но эффект будет тот же. Такой альтернативный способ реализации даже был частью основного предложения.

Firefox первым реализовал этот принцип в виде эксперимента, после чего включил его по умолчанию в Firefox 71. Как только это было сделано, ваш сайт мог стать немного быстрее и удобнее. Возможно, в будущем это будет реализовано через таблицы стилей браузера, но пока что спасибо и на этом.

Обратная совместимость

При внесении изменений в поведение, всегда возникает беспокойство по поводу обратной совместимости, и эта функция не является исключением. В теории, если все четыре атрибута заданы правильно, проблем быть не должно.

Тем не менее, когда Firefox начали экспериментировать, обнаружились проблемы там, где width и height были заданы неправильно. Если раньше эти некорректные значения при переопределении CSS-стилями игнорировались бы, то теперь при установке значения auto они продолжали использоваться, что приводило к искажению пропорций изображения. Вы можете возразить, что разработчикам просто следует задавать правильные значения, а в некоторых случаях проблемы могут возникать и сейчас (как в приведённом выше примере, где не установили height: auto ). Но и повышать риск сломать разметку из-за небольшой ошибки — идея плохая. Это то, чего в вебе очень стараются избегать.

Решение этой проблемы относительно простое: пусть фактическое соотношение сторон изображения переопределяет значение, вычисленное в CSS. Таким образом, неправильно рассчитанное соотношение сторон будет использоваться для первоначально отрисованной страницы, но потом может быть пересчитано, когда изображение всё же загрузится. Это действительно может приводить к смещению макета (поскольку изначально выделенное может оказаться неправильным), но ведь так было и раньше. А в конечном счёте это ещё и лучше, поскольку неправильное соотношение сторон часто будет ближе к истине, чем нулевая начальная высота.

Внедрение в других браузерах

После успешного эксперимента Firefox, в Chrome также решили это реализовать (снова-таки, пока что с помощью изменения метода рендеринга, а не таблиц стилей браузера) и запустили по умолчанию в Chrome 79. Недавно, в январе 2020, Apple добавила данный функционал в Tech Preview версию Safari, так что вскоре он может появиться и в стабильной версии. Это будет значить, что последний из основных браузеров реализует это и веб станет лучше при использовании огромного количества сайтов.

Ограничения

При использовании данного функционала следует помнить о некоторых ограничениях, включая проблемы с:

• Art Direction
• Ленивой загрузкой
• Не изображениями

Art Direction

Фикс отлично работает для расчёта соотношения сторон, основанном на фиксированных width и height , но что если они меняются? Это называю art direction — ниже показан пример:

В этом случае мы используем широкое изображение для десктопов, а для мобильных — обрезанное квадратное. Адаптивность изображений может быть реализована с помощью атрибутов srcset элемента :

или с помощью элемента :

В настоящее время оба эти элемента позволяют задавать в теге атрибуты width и height только один раз. Также, их нельзя задавать в . Уже было предложено добавить возможность делать это, но пока что использование адаптивных изображений разных размеров всё равно будет приводить к смещению раскладки.

Ленивая загрузка

Данный функционал отлично сочетается с ленивой загрузкой. В идеале, при ленивой загрузке все изображения должны загружаться при прокрутке страницы по мере приближения к области видимости, но всё же за её пределами. Но порой это не происходит, если пользователь, например, очень быстро прокручивает страницу или скорость соединения слишком мала. Наличие правильно заданного пространства, по крайней мере, поможет избежать смещения раскладки после загрузки изображения. Кроме того, даже когда загрузка происходит за пределами области видимости, смещение раскладки может быть дорогостоящим с точки зрения затрат ресурсов процессора. Это было показано выше.

Некоторые техники ленивой загрузки могут включать отсутствие элемента или, по крайней мере, атрибута src (для предотвращения загрузки изображения браузером по умолчанию). Следовательно, в предложенных нововведениях может и не быть существенной пользы, в зависимости от того, как браузер обрабатывает элемент , с атрибутом src или без него. Хотя, если данное CSS-решение станет доступным, разработчики получат больше контроля над соотношением сторон.

Недавно командой Chrome была внедрена встроенная ленивая загрузка, после чего она была добавлена в спецификацию HTML. Вскоре эта функция появится и в Firefox а затем, надеюсь, и в Safari. В этом случае используется элемент с атрибутом src с примерно следующим синтаксисом:

Отлично. Что ж, к сожалению, я обнаружил, что это решение с высотой и шириной несовместимо с ранее добавленным встроенным функционалом ленивой загрузки, в чём можно убедиться на этой тестовой странице. Я сообщил об этой ошибке и надеюсь, что команда Chrome исправит её (Update: было исправлено в Chrome 83).

Не изображения

В данный момент браузеры, которые реализовали данный функционал, сделали это только для элемента , но это также было бы полезно и для элементов , и и этот вопрос обсуждается. Снова-таки, если данное CSS-решение станет доступным через функцию attr и свойство aspect-ratio , разработчики смогут реализовать его для любых необходимых элементов.

Заключение

Мне нравятся улучшения, которые работают без каких-либо усилий со стороны владельцев веб-сайтов. Конечно, я не говорю, что всю работу должны делать разработчики браузеров и команды, занимающиеся стандартизацией, но часто наиболее сдерживающим фактором является необходимость начать массовое использование новых решений в коде. Чем меньше будет барьеров, тем больше вероятность, что новые решения будут приняты. Устранение сдвигов раскладки при использовании адаптивных изображений кажется одним из таких улучшений.

Единственное что потребуется от веб-разработчиков, — задавать атрибуты width и height в разметке. Нам не следует отказываться от этой привычки, а многие CMS лишь помогают в этом. Согласно данным HTTPArchive, 62% тегов имеют ширину или высоту, что намного выше, чем я ожидал, если честно. Но давайте попробуем увеличить эту статистику еще больше, теперь у нас снова есть причина для этого. Итак, я призываю вас делать это при разработке сайтов. Это улучшит удобство ваших пользователей и, в конечном итоге, сделает их счастливее, а не к этому ли мы все стремимся?

От переводчика:

Мне написал @Alexandr_Mi, указав на ещё один вариант решения данной проблемы с помощью «data: image / svg + xml + lazyload».

Подробнее в заметке на Reddit

Мобильный стиль. Корректирование и доработка

Не пришло в голову куда написать, решил, что это все таки коллективная работа. Ребята, а это что за приколы в мобильном стиле:

@media screen and (max-width: 540px)
mobile.5.css:22
img max-width: 100% !important ;
height: auto;
>

Нафига такие приоритеты на все картинки на всем форуме? Это с расчетом, что перебивать даже не пытайтесь? Итак импортантов хватает. Я не видел мобильный вариант, но. Посмотрел, хватило части (лучше бы не видел):

@media screen and (max-width: 540px) html, body, #pun, .punbb width: 100% !important ;
height: 100% !important ;
margin: 0;
padding: 0;
background-size: contain;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
overflow-wrap: break-word;
float: none;
>
body position: relative;
background-position: center 0;
overflow-x: hidden !important ;
-webkit-overflow-scrolling: touch !important ;
overflow-y: scroll !important ;
z-index: 1;
>

Я даже не хочу смотреть дальше код, и это под одно разрешение. Это надо отключать — это не мобильный вариант, более того люди, которые хотят адаптировать свои форумы под мобильные устройства будут об эти импортанты постоянно спотыкаться. Это на уровне сервиса внедрять было нельзя.

Не удержался глянул дальше:

#pun width: 100% !important;
border-width: 0 !important;
overflow-x: hidden !important;
margin: 0 !important;
padding: 0 !important;
>

Этот файл сервиса: http://forum4.ru/style/mobile.5.css ? — Посмотрел, это файл сервиса. Это надо отключать, и так сложно что-то адаптировать, а с такими раскладами еще и просчитывать импортанты для мобильных стилей..

Отредактировано kolobdur74 (Вс, 19 Фев 2017 23:37:20)

Поделиться2Пн, 20 Фев 2017 05:44:16

• Автор: Alex_63
• Администратор
• Зарегистрирован : Чт, 11 Дек 2014
• Сообщений: 10525
• Уважение: +6926
• Позитив: +5173
• Пол: Мужской
• Последний визит:
  Пн, 22 Янв 2024 20:49:00

kolobdur74
Ну импортанты легко перебиваются более подробным указанием селектора(собсно ты где-то про это и писал в теме)
К примеру

Без !important многие правки для мобилок просто не срабатывают, особенно с учетом того, что юзеры любят пихать кучу кодов -правок в HTML верх, ниже мобильного стиля, тады без !important их не перекрыть(если поменяем — наверняка будут жалобы от юзеров, что форум съехал и т.п)
С другой стороны кнешн согласен, что много импортантов — не Айс, но и без них тут вряд ли обойтись
Автор правок под мобильный стиль — Reysler, он не первый год с css знаком, мон сказать профессионал в этой области(а ты и мну дилетанты, так что мож не оч правильная точка зрения у нас)

Ксать есть тема про мобильный стиль Вопросы по мобильному стилю

Поделиться3Пн, 20 Фев 2017 05:45:21

• Автор: Reysler
• LastMan
• Зарегистрирован : Вт, 9 Дек 2008
• Сообщений: 3380
• Уважение: +2032
• Позитив: +639
• Пол: Мужской
• Последний визит:
  Вчера 17:08:14

Наверное надо было мне дописать тему по сборке собственного мобильного стиля (для этого я её и создавал). Может добить её на основе существующего от сервиса, но с рядом доработок, убрав лишние important’s и меню на выбор пользователя: иконками или текстом.

Поделиться4Пн, 20 Фев 2017 13:20:54

• Автор: kolobdur74
• .
• Зарегистрирован : Пн, 6 Сен 2010
• Сообщений: 7337
• Уважение: +5796
• Позитив: +6428
• Пол: Мужской
• Последний визит:
  Вчера 21:57:49

Alex_63, Reysler
Ну, вот я убрал в стандартном все импортанты и посмотрел как работает:

Ну, и картина мной ожидаемая — всё работает, кроме части правок под браузерные движки, вот на них, если есть необходимость импортанты можно оставить, а со всего остального надо убрать.. Ведь на самом деле уже задано приоритетное правило для данного разрешения: @media screen and (max-width: 540px) — то есть уже задано, что при данном разрешении работает дизайн под этими скобками, а основной работает, если не противоречит заданным правилам для этого разрешения.

img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg" alt="Логотип MDN - изображение динозавра с текстом MDN web docs" /> 

a href="https://developer.mozilla.org"> img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg" alt="Посетить сайт MDN" /> a> 

img src="mdn-logo-sm.png" alt="MDN" srcset="mdn-logo-HD.png 2x" /> 

img src="clock-demo-thumb-200.png" alt="Часы" srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" sizes="(max-width: 600px) 200px, 50vw" /> 

img alt="image" src="penguin.jpg" /> 

img alt="Пингвин на пляже." src="penguin.jpg" />