Menghuraikan penggunaan pertanyaan media @media (dengan demonstrasi kod)-tutorial css-php.cn

Menghuraikan penggunaan pertanyaan media @media (dengan demonstrasi kod)

藏色散人

Lepaskan： 2022-08-07 16:48:14

ke hadapan

3028 orang telah melayarinya

Apakah pertanyaan media?

Pertanyaan media membolehkan kami menetapkan gaya CSS untuk paparan peranti berdasarkan cirinya (seperti lebar port pandangan, nisbah skrin, orientasi peranti: landskap atau pertanyaan media). terdiri daripada media Jenis dan satu atau lebih ungkapan bersyarat yang mengesan ciri media. Sifat media yang boleh dikesan dalam pertanyaan media ialah lebar , tinggi dan warna (dsb.). Menggunakan pertanyaan media, anda boleh menyesuaikan kesan paparan untuk peranti output tertentu tanpa mengubah kandungan halaman.

1. Kaedah operasi pertanyaan media

Operasi sebenar ialah: mulakan dengan bertanya kepada peranti (dipanggil ungkapan), jika hasil ungkapan adalah benar, CSS dalam pertanyaan media digunakan, jika Jika ungkapan itu dinilai palsu, CSS dalam pertanyaan media akan diabaikan.

2. Sintaks pertanyaan media

    @media screen and (max-width:600px) {
        }

Salin selepas log masuk

3. Demonstrasi kod 1qqq

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row{
            border: 1px solid red;
        }
        .col{
            display: inline-block;
            width: 100%;
            height: 100px;
            background-color: green;
        }
        /* <768px */
        @media screen and (max-width:768px) { 
            .col{
                width: 100%;
            }
        }
        /* >=992 and  */
        @media screen and (min-width:992px){
            .col{
                width: 49%;
            }
        }
        /* >=768px and <1200px */
        @media screen and (min-width:768px) and (max-width:1200px){
            .col{
                width: 48%;
            }
        }
        /* >=1200px */
        @media screen and (min-width: 1200px) {
            .col{
                width: 33%;
            }
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Salin selepas log masuk

Rendering selepas dikurangkan kepada 768px

Pembelajaran yang disyorkan: "bahagian hadapan web"

Atas ialah kandungan terperinci Menghuraikan penggunaan pertanyaan media @media (dengan demonstrasi kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!