hujung hadapan web
tutorial css
Menghuraikan penggunaan pertanyaan media @media (dengan demonstrasi kod)
Menghuraikan penggunaan pertanyaan media @media (dengan demonstrasi kod)
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Petua untuk membuat pertanyaan media menggunakan unit CSS Viewport vh dan vmin
Sep 13, 2023 am 11:18 AM
Petua untuk membuat pertanyaan media menggunakan unit CSSViewport vh dan vmin Dengan populariti peranti mudah alih, reka bentuk responsif telah menjadi teknologi penting untuk reka bentuk web moden. Untuk menyesuaikan diri dengan saiz skrin yang berbeza, pembangun perlu melaraskan reka letak dan gaya melalui pertanyaan media. Dalam pertanyaan media, unit yang paling biasa digunakan ialah piksel (px). Walau bagaimanapun, CSS3 memperkenalkan unit tetingkap baharu, vh dan vmin, yang boleh menyesuaikan diri dengan saiz peranti yang berbeza dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan vh dan v
Perkara yang perlu dilakukan jika pertanyaan media css gagal
Jan 28, 2023 pm 03:29 PM
Penyelesaian kepada kegagalan pertanyaan media css: 1. Ubah suai sintaks seperti "@media screen dan (max-width:768px){...}" 2. Tambah tag meta yang diperlukan pada fail pengepala html; kenyataan pertanyaan media Letakkan sahaja di belakang dokumen css asal.
Panduan untuk sifat susun atur responsif CSS: pertanyaan media dan lebar min/lebar maksimum
Oct 20, 2023 pm 02:19 PM
Panduan untuk sifat susun atur responsif CSS: mediaqueries dan min-width/max-width Dengan populariti peranti mudah alih, semakin ramai pengguna mengakses tapak web melalui telefon mudah alih dan tablet. Ini memerlukan tapak web untuk dapat menyesuaikan diri dengan saiz skrin dan jenis peranti yang berbeza untuk memberikan pengalaman pengguna yang lebih baik. Reka letak responsif CSS ialah penyelesaian yang membolehkan kandungan web menyesuaikan secara automatik dengan reka letak dan gaya pada peranti yang berbeza. Apabila melaksanakan reka letak responsif CSS, kami sering menggunakan dua perkara penting
Panduan Lengkap untuk Pertanyaan Media CSS (Media Qures)
Sep 29, 2022 pm 08:41 PM
Artikel ini membawa anda mempelajari pertanyaan media CSS (Media Quires), memperkenalkan definisi sintaks pertanyaan media secara terperinci, mempelajari kemahiran penggunaan pertanyaan media daripada tiga contoh reka letak khusus dan memperkenalkan beberapa pengetahuan atribut scss dan css.
Meneroka sifat pertanyaan media CSS: @media dan min-device-width/max-device-width
Oct 20, 2023 pm 07:18 PM
Penerokaan sifat pertanyaan media CSS: @media dan min-device-width/max-device-width, contoh kod khusus diperlukan Pengenalan: Dengan populariti peranti mudah alih, reka bentuk responsif tapak web menjadi semakin penting. Apabila melaksanakan reka bentuk responsif, sifat pertanyaan media CSS memainkan peranan yang penting. Artikel ini akan meneroka secara mendalam dua atribut pertanyaan media @media dan min-device-width/max-device-width, dan
Unit manakah yang sesuai untuk melaksanakan susun atur responsif?
Jan 27, 2024 am 09:39 AM
Apakah unit yang hendak dipilih untuk reka letak responsif? Dengan populariti peranti mudah alih dan tablet, semakin ramai orang menggunakan pelbagai peranti untuk menyemak imbas web. Untuk memastikan halaman web mempunyai kebolehbacaan yang baik dan pengalaman pengguna pada peranti yang berbeza, reka letak responsif secara beransur-ansur menjadi pertimbangan penting dalam reka bentuk dan pembangunan. Apabila melaksanakan susun atur responsif, memilih unit yang betul adalah sangat penting. Artikel ini akan menganalisis beberapa unit biasa untuk membantu pembaca memilih unit yang sesuai untuk melaksanakan reka letak responsif. Piksel (px): Piksel ialah unit panjang yang paling biasa dan mewakili a
Menghuraikan penggunaan pertanyaan media @media (dengan demonstrasi kod)
Aug 07, 2022 pm 04:48 PM
Pertanyaan media membolehkan kami menetapkan gaya CSS untuk paparan peranti berdasarkan cirinya (seperti lebar port pandangan, nisbah skrin, orientasi peranti: landskap atau potret Pertanyaan media terdiri daripada jenis media dan satu atau lebih ungkapan bersyarat yang mengesan ciri media). gubahan.
Petua pengoptimuman sifat lebar CSS: lebar maks dan lebar min
Oct 24, 2023 am 11:36 AM
Petua pengoptimuman atribut lebar CSS: lebar maksimum dan lebar min Dalam reka bentuk dan pembangunan web, menetapkan lebar elemen adalah tugas biasa. Untuk menjadikan halaman web memberikan hasil yang baik pada skrin dengan saiz yang berbeza, kami sering menggunakan atribut lebar maks dan lebar min untuk mengawal lebar elemen. Artikel ini akan memperkenalkan cara menggunakan kedua-dua atribut ini untuk mengoptimumkan reka bentuk halaman web dan memberikan beberapa contoh kod khusus. Gunakan lebar maksimum untuk mengawal lebar maksimum elemen
