CSS メディアクエリーで min-width または max-width を px で指定した場合、画面幅が何 px 以上、何 px 以下になると表示が切り替わるのかを調べてみました。

以上以下

CSS のメディアクエリーで「min-width」または「max-width」をピクセル px 単位で指定した場合、画面幅が何ピクセル px 以上、または、何ピクセル px 以下になると実際の表示が切り替わるのかを調べてみました。

ウェブブラウザ「Mozilla Firefox」のレスポンシブデザインモードを使用して表示テストを行いました。

目次まで戻る

min-width 編

CSS メディアクエリーの「min-width」の表示テストとして以下の URL にサンプルページを準備しました。

当ブログの画像フォルダにアップロードした HTML ファイルです。悪意のある内容は含んでいません。

CSS メディアクエリーのテスト（min-width 編）: https://pulogu.net/wordpress/wp-content/uploads/2023/11/media-query-min-width.html

サンプルページのソースコードは以下のようになっています。

「min-width:320px」と「min-width:480px」をメディアクエリーのブレークポイント（切り替えるポイント）として指定しています。

320 , 480 と数字が大きくなる順番で min-width を指定しています。画面幅が徐々に大きくなる順番で表示テストを行ってみたいと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS メディアクエリーのテスト（min-width 編）</title>
<link rel="stylesheet" href="" type="text/css" media="all" />
<script type="text/javascript">
function test(){
    let a=document.getElementById("w");
    let b=document.getElementById("h");
    a.textContent=window.innerWidth;
    b.textContent=window.innerHeight;
}
window.onload=test;
window.onresize=test;
</script>
<style type="text/css">
body{
    background-color:#ccc;
}
div{
    font-size:24px;
}
#a::after{
    content:"なし";
}
@media screen and (min-width:320px){
    #a::after{
        content:"min-width:320px";
    }
}
@media screen and (min-width:480px){
    #a::after{
        content:"min-width:480px";
    }
}
</style>
</head>
<body>
<h1>CSS メディアクエリーのテスト（min-width 編）</h1>
<div>window.innerWidth: <span id="w"></span>px</div>
<div>window.innerHeight: <span id="h"></span>px</div>
<div id="a">適用中のメディアクエリ: </div>
</body>
</html>

サンプルページを表示してみたところ、以下の結果になりました。

画面幅 319px の場合

まだメディアクエリーは適用されないようです。

画面幅 320px の場合

「min-width:320px」のメディアクエリーが適用されました。「min-width:320px」は 320px 以上という意味になるようです。

画面幅 479px の場合

画面幅 320px 以上なので「min-width:320px」のメディアクエリーが適用されています。

画面幅 480px の場合

画面幅が 480px 以上になったので「min-width:480px」のメディアクエリーが適用されました。

画面幅 640px の場合

画面幅 480px 以上なので「min-width:480px」のメディアクエリーが適用されたままです。

目次まで戻る

max-width 編

CSS メディアクエリーの「max-width」のテストとして以下の URL にサンプルページを準備しました。当ブログの画像フォルダにアップロードした HTML ファイルです。悪意のある内容は含んでいません。

CSS メディアクエリーのテスト（max-width 編）: https://pulogu.net/wordpress/wp-content/uploads/2023/11/media-query-max-width.html

サンプルページのソースコードは以下のようになっています。

「max-width:480px」と「max-width:320px」をメディアクエリーのブレークポイント（切り替えるポイント）として指定しています。

今度は 480 , 320 と数字が小さくなる順番でメディアクエリーを指定しています。画面幅が徐々に大きくなる順番で表示テストを行ってみたいと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS メディアクエリーのテスト（max-width 編）</title>
<link rel="stylesheet" href="" type="text/css" media="all" />
<script type="text/javascript">
function test(){
    let a=document.getElementById("w");
    let b=document.getElementById("h");
    a.textContent=window.innerWidth;
    b.textContent=window.innerHeight;
}
window.onload=test;
window.onresize=test;
</script>
<style type="text/css">
body{
    background-color:#ccc;
}
div{
    font-size:24px;
}
#a::after{
    content:"なし";
}
@media screen and (max-width:480px){
    #a::after{
        content:"max-width:480px";
    }
}
@media screen and (max-width:320px){
    #a::after{
        content:"max-width:320px";
    }
}
</style>
</head>
<body>
<h1>CSS メディアクエリーのテスト（max-width 編）</h1>
<div>window.innerWidth: <span id="w"></span>px</div>
<div>window.innerHeight: <span id="h"></span>px</div>
<div id="a">適用中のメディアクエリ: </div>
</body>
</html>

上記サンプルページを表示してみたところ、以下の結果になりました。