Rumah >hujung hadapan web >tutorial css >Menghuraikan penggunaan pertanyaan media @media (dengan demonstrasi kod)
Menghuraikan penggunaan pertanyaan media @media (dengan demonstrasi kod)
- 藏色散人ke hadapan
- 2022-08-07 16:48:143121semak imbas
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) {
}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>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!