PC、タブレット、モバイル用のCSSメディアクエリ(Media Query)

機器の解像度に応じてCSSを特に指定する場合は、メディアクエリ(Media Query)を使用することができます。 以下は、githubに上がってきたデスクトップ(PC)、タブレット、モバイル用に使用できるCSSメディアクエリです。

PC、タブレット、モバイル用のCSSメディアクエリ(Media Query)

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops ##Device = デスクトップ ##Screen = 1281px以上の解像度デスクトップ */ @media (min-width: 1281px) { //CSS } /* ##Device = Laptops、Desktops /CSS } /* ##Device = Tablets, Ipads (landscape), ##Screen = B/w 1025px to 1280px ##Device = タブレット, iPad (縦), ##Screen = 1025pxから1280pxの間 */ @media (min-width: 1025px) and (max-width: 1280px) { //CSS } /* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px ##Device = タブレット、iPad (横) , Mobiles (Landscape) ##Screen = B/w 768px to 1024px ##Device = 低解像度タブレット, モバイル (水平) ##Screen = 768px から 1024px の間 */ @media (min-width: 768px) and (max-width : 1024px) { //CSS } /* ##Device = Most of the Smartphones Mobiles (Por trait) ##Screen = B/w 768px to 1024px ##Device = ほとんどのスマートフォンモバイルデバイス(縦) 768px) { //CSS } // ##ソース: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
//原文でlandscape(水平)、portrait(垂直)が誤って記載されている部分を修正しました。

アイパッドとiPhone用のメディアクエリーは、次の文を参照してください。 iPhone Xのメディアクエリーも含まれています。

CSS米D-クエリに対してw3schools.com文書を確認することができます。

CSS @mediaルールは、IE9以降でサポートされます。

CSSメディアクエリブラウザのサポート

メモ:

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

4のコメント

  1. ああ Visual Composer すぐに無効にしました。

    あなたが言ったように変更するとすぐに修正されました。
    ありがとうございます! 起き確認してすぐ修正するとても幸せです! 今日一日幸せ(x1000)した一日を過ごす~~~:)

    1. 問題がうまく解決されてよかったですね。WordPressと関連して気になる点がございましたらコメントをご利用ください。

  2. こんにちは! ユニコーンのテーマを書いている WordPress 初心者です(1から100までの独学には簡単ではないですねㅠㅠ)

    私はエレメンでページを公開する
    モバイル版で見たアプリケーションにおいて同じ大きさの画像が、
    ランディングページ(https://jigugong.com/)では、左右のパディングがほとんどなくいっぱい出てくる
    ランディングページを除いた残りのページには、同じ画像でも、左右にパディングが生じ狭くてきます。
    https://jigugong.com/ vs https://jigugong.com/manual2/

    (ノートブックやタブレットでは違いはありませんが、モバイルでしか行かないと、ホームでのみサイズがきちんと出てきて、残りのページはすべて両側に幅ができますㅠㅠ)解決しようとしましたが、最終的に答えが見つからずに文を残します...)
    もしこれらの問題は、どのように解決することができますか?

    1. こんにちは、キム・スンファン様。

      WordPress Uniconテーマを見てみると、WPBakery Page Builder("Visual Composer")がメインページビルダーのようです。
      Visual Composerがインストールされているようだが、エレメンページビルダーも一緒にインストールされたようですね。
      ページビルダー自体が重いので一つだけ使用することが望ましいです。
      そしてページビルダーを2つを同時に有効にすると、プラグインがクラッシュする可能性もあって。

      Elementor ページビルダーを使用している場合は、ページテンプレートを「Elementor 「全幅」を選択してテストしてみますか?

      https://www.screencast.com/t/ASqEbP3Q

コメントを残す

*電子メール情報は公開されません。