미디어 클래스

CSS에서 추악한 미디어 쿼리 없이 할 수 있다면 좋지 않을까요?
각각의 너비에 대한 클래스와 그게 전부입니까?

약간의 Javascript로 문제 없습니다!

먼저 객체에서 원하는 화면 너비와 해당 클래스 이름을 정의합니다.

const breakpoints = [
  { width: "36em", class: "small" },
  { width: "64em", class: "medium" },
  { width: "99em", class: "large" }
];

다음 쿼리를 사용하여 적절한 화면 너비를 찾습니다.

if (window.matchMedia(`(max-width: ${breakpoint.width})`).matches)

이제 클래스를 body 태그에 추가하십시오(이전 클래스를 먼저 삭제하는 것을 잊지 마십시오).

document.body.removeAttribute("class");
document.body.classList.add(breakpoint.class);

이 모든 것을 작은 함수에 넣고 시작 부분과 뷰포트가 변경될 때마다 호출합니다.

window.addEventListener("DOMContentLoaded", mediaClasses);
window.addEventListener("resize", mediaClasses);

여기에 작은 예가 있습니다codepen.
이 중 다소 큰 것template on GitHub .