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.
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.
@media screen and (max-width:600px) { }
<!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>
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!