Menghuraikan penggunaan pertanyaan media @media (dengan demonstrasi kod)

藏色散人
Lepaskan: 2022-08-07 16:48:14
ke hadapan
3007 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!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan