[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

175users がブックマーク コメント 6

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

JSのレスポンシブ対応をresizeからmatchMediaに移行した

175 users zenn.dev/no4_dev

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページ

記事へのコメント6

  • 注目コメント
  • 新着コメント
mayumayu_nimolove
昔のやり方を恥ずかしながらって言うのはやめた方がいい。目的達成を無視した手段信仰になってくる。

その他
yamadashy
matchMedia いいなあ。ブレークポイント切り替わったときだけに処理するとかやりたいときは楽

その他
dorokei
matchMediaのほうが美しいのは確かだが、「リサイズの度にゴリゴリlistener関数が実行」って大した問題じゃないのでは?リサイズってそんな発生するイベントじゃないと思うし。

その他
hirose504
"window.matchMediaを使う場合、listener関数が実行されるのは、ブレークポイントが切り替わったタイミングだけ" resizeよりもメリットある

その他
mayumayu_nimolove
mayumayu_nimolove 昔のやり方を恥ずかしながらって言うのはやめた方がいい。目的達成を無視した手段信仰になってくる。

2021年03月14日 リンク

その他
akymrk
"window.matchMedia("(max-width:767px)").addListener(e=> {...})"

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「JSのレスポンシブ...」が注目されています。

気持ちをシェアしよう

ツイートする

JSのレスポンシブ対応をresizeからmatchMediaに移行した

JS でブレークポイント毎に処理を分ける場合の方法を resize から matchMedia に移行したので、その際の... JS でブレークポイント毎に処理を分ける場合の方法を resize から matchMedia に移行したので、その際のメモ書きです。 昔ながらの方法 恥ずかしながら、最近まで JS でブレークポイント毎に JS 処理を切り替える場合、 以下のように昔ながらの resize イベントの監視を使っていました... /** * イベントリスナー */ const listener = () => { // リサイズ時に行う処理 if (window.innerWidth >= 768) { // 768px以上 console.log('PC用ブレークポイント用処理'); } else { // 768px未満 console.log('SP用ブレークポイント用処理'); } }; // リスナー登録 window.addEventListener('resize', listener); /

ブックマークしたユーザー

  • igatea2025年08月21日 igatea
  • techtech05212024年04月17日 techtech0521
  • m-ito272024年03月06日 m-ito27
  • kochi152022年01月26日 kochi15
  • rie1412021年10月23日 rie141
  • nitamago_monster2021年07月21日 nitamago_monster
  • tmegos2021年04月03日 tmegos
  • daikix2021年03月21日 daikix
  • herakures2021年03月18日 herakures
  • m-mittur2021年03月17日 m-mittur
  • dera132021年03月16日 dera13
  • tor4kichi2021年03月15日 tor4kichi
  • slay-t2021年03月15日 slay-t
  • shirotorabyakko2021年03月15日 shirotorabyakko
  • gDomon2021年03月15日 gDomon
  • shaw2021年03月15日 shaw
  • aTn2021年03月15日 aTn
  • hamaco2021年03月15日 hamaco
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /