メディアクラス

3572 ワード
javascript css beginners mediaquery テキストリンク
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のやや大きいもの.
セットアップ影CLJS反応プロジェクト
オブジェクトをストレージにアップロードする