@x4zx
junior python developer

Как в зависимости от ширины экрана заменить html код страницы?

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

Важно:
Заменить конкретно html код, а не css!
  • Вопрос задан
  • 113 просмотров
Решения вопроса 2
mizutsune
@mizutsune
Frontend Developer
Если по каким-то причинам недостаточно медиа запросов из CSS, тогда можно воспользоваться методом matchMedia.

Простой пример использования:

const targetElement = document.querySelector(".target");
const breakpoint = window.matchMedia("(max-width: 700px)");

const breakpointChecker = () => {
     if (breakpoint.matches) {
          targetElement.textContent = "Apple";
     } else {
          targetElement.textContent = "Orange";
     }
};

breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();


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

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

И всё как бы понятно и хорошо, но всё же есть такие моменты когда использование JS при работе с медиа запросами - оправданно и matchMedia отлично справляется с поставленными задачами, например когда нужно включить/отключить какой-нибудь плагин или произвести какие-нибудь действия, которые невозможно выполнить используя один только CSS.

Как альтернативу matchMedia, конечно можно использовать событие resize, но в таком случае придётся оптимизировать функцию используемую в обработчике, так как resize имеет свои подводные камни.
Ответ написан
Комментировать
@Kvason
Веб-разработчик
Ну неужели так сложно загуглить, для этого есть медиа запросы в css https://developer.mozilla.org/ru/docs/Web/CSS/Medi...
В твоем случае тебе надо max-width и min-width
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
noder_ss
@noder_ss
Человек хороший, вёрстка по душе
Если именно html код, а не css, то делай такую проверку: if(window.screen.width < *ширина, на которой делается изменения*){
*Сами действия*
}
Ну или попробуй через медиазапросы, типа @media(max-width:*ширина, на которой делается изменения*){
*Сами действия*
}
Ответ написан
Комментировать
Alex_mos
@Alex_mos
Google всему голова
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы