hujung hadapan webtutorial cssApakah perbezaan antara 'skrin' dan 'skrin sahaja' dalam pertanyaan media?
Dalam CSS, pertanyaan media memainkan peranan penting dalam mencipta reka bentuk web responsif, dan pada masa kini reka bentuk responsif merupakan salah satu perkara penting yang diperlukan oleh setiap tapak web untuk menarik pelawat.
Secara umum, kita boleh menulis pertanyaan media menggunakan peraturan CSS @media. Walau bagaimanapun, kami boleh menggunakan syarat dan kata kunci yang berbeza dalam pertanyaan media untuk menyasarkan peranti yang berbeza. Contohnya, peranti mudah alih, peranti desktop, skrin pencetak, dsb.
Dalam tutorial ini, kita akan mempelajari perbezaan antara 'skrin' dan 'skrin sahaja' dalam pertanyaan media.
什么是媒体查询中的屏幕？
Dalam CSS, kami menggunakan kata kunci 'skrin' di dalam pertanyaan media untuk menyasarkan semua peranti dengan skrin, seperti tablet, mudah alih, desktop, pencetak, pembaca skrin, dll.
Sintaks
Pengguna boleh mengikuti sintaks di bawah untuk menggunakan kata kunci skrin dalam pertanyaan media.
@media screen and (condition) {
/* CSS code */
}
Dalam sintaks di atas, syarat digunakan untuk menetapkan titik putus untuk peranti yang berbeza.
Contoh 1
的中文翻译为：示例 1
Dalam contoh di bawah, kami telah menggunakan kata kunci skrin dengan pertanyaan media dalam CSS. Kami mempunyai elemen div yang mengandungi nama kelas 'teks'.
Pada desktop, warna latar belakang badan ialah 'aqua', tetapi kami menukarnya kepada 'kuning' untuk peranti dengan saiz skrin kurang daripada 1200 px. Selain itu, kami menukar gaya elemen div untuk peranti kurang daripada 1200 px.
Dalam output, pengguna boleh menukar saiz tetingkap penyemak imbas dan melihat perbezaan gaya.
<html>
<head>
<style>
* {background-color: aqua;}
.text {
background-color: red;
width: 500px;
height: auto;
padding: 10px;
margin: 10px;
border: 3px solid green;
}
@media screen and (max-width: 1200px) {
*{background-color: yellow;}
.text {
background-color: green;
width: 50%;
border: 5px dotted red;
}
}
</style>
</head>
<body>
<h3 id="Using-the-i-media-rule-i-in-CSS-to-make-a-responsive-web-design"> Using the <i> @media rule </i> in CSS to make a responsive web design </h3>
<h4 id="Set-the-screen-width-less-than-pixels-to-change-the-style"> Set the screen width less than 1200 pixels to change the style </h4>
<div class = "text">
This is a test div element.
</div>
</body>
</html>
媒体查询中唯一的屏幕是什么？
在CSS中编写媒体查询时，我们还可以使用“only”关键字与“screen”关键字一起体用“only”关键字与“screen”关键字一起体用。字时，它仅在浏览器匹配媒体类型和媒体特性时应用媒体查询中的样式。
Walau bagaimanapun, penyemak imbas lama mempunyai kesan khas kata kunci 'sahaja'. Sebagai contoh, katakan pelayar lama tidak menyokong pertanyaan media dan ciri media. Dalam kes itu, mereka tidak sepatutnya menggunakan gaya yang ditakrifkan dalam blok pertanyaan media apabila peranti tidak sepadan dengan spesifikasi jenis media.
Namun, semua penyemak imbas moden mengabaikan kata kunci ‘sahaja’.
Sintaks
Pengguna boleh mengikuti sintaks di bawah untuk menggunakan kata kunci ‘sahaja’ dalam pertanyaan media.
@media only screen and (condition) {
/* CSS code */
}
Contoh 2
Dalam contoh di bawah, kami telah mentakrifkan elemen div 'berbilang', yang mengandungi lima elemen div 'tunggal'. Kami telah menggayakan elemen div 'berbilang' dan 'tunggal'.
Selain itu, kami telah menggunakan pertanyaan media untuk menggayakan halaman web untuk peranti dengan lebar kurang daripada 680 piksel. Pengguna boleh menukar saiz tetingkap penyemak imbas dan melihat perbezaan dalam reka bentuk elemen div tunggal dan berbilang.
<html>
<head>
<style>
.multiple {
width: 100%;
height: 90%;
background-color: blue;
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.single {
width: 90%;
height: 100px;
background-color: yellow;
margin: 10px;
float: left;
margin: 0 auto;
border-radius: 12px;
}
@media only screen and (min-width: 680px) {
.multiple {
width: 90%;
height: 80%;
background-color: aqua;
border-radius: 12px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.single {
width: 45%;
height: 100px;
background-color: red;
margin: 10px;
float: left;
border-radius: 12px;
}
}
</style>
</head>
<body>
<h2 id="Using-the-i-media-rule-i-in-CSS-to-make-a-responsive-web-design"> Using the <i> @media rule </i> in CSS to make a responsive web design </h2>
<h3 id="Set-the-screen-width-less-than-pixels-to-change-the-style"> Set the screen width less than 680 pixels to change the style </h3>
<div class = "multiple">
<div class = "single"> </div>
<div class = "single"> </div>
<div class = "single"> </div>
<div class = "single"> </div>
<div class = "single"> </div>
</div>
</body>
</html>
Perbezaan Antara Skrin dan Skrin Sahaja dalam Pertanyaan Media?
Di sini, kami telah menerangkan perbezaan antara skrin dan skrin sahaja dalam pertanyaan media dalam jadual perbezaan.
| Hartanah | 的中文翻译为：属性 | “skrin” 媒体类型 | “skrin sahaja” 媒体类型 |
| Syntax | 的中文翻译为：语法 | @skrin media { /* kod CSS */ } | @media sahaja skrin { /* CSS代码 */ } |
| 目标 | 它面向所有设备，如智能手机、台式机、平板电脑等。 | Ia juga menyasarkan semua peranti kecuali peranti yang tidak menyokong jenis dan ciri media seperti pengimbas atau pencetak. |
Pengguna mengetahui perbezaan antara jenis media ‘skrin’ dan ‘skrin sahaja’. Kata kunci ‘sahaja’ tidak mempunyai kesan dalam penyemak imbas moden kerana ia sentiasa mengabaikan kata kunci ‘sahaja’, tetapi ia berguna untuk versi pelayar lama.
Atas ialah kandungan terperinci Apakah perbezaan antara 'skrin' dan 'skrin sahaja' dalam pertanyaan media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Helah CSS yang hilang cohost.orgApr 25, 2025 am 09:51 AMDalam jawatan ini, Blackle Mori menunjukkan kepada anda beberapa hacks yang ditemui semasa cuba menolak had sokongan HTML Cohost. Gunakan ini jika anda berani, supaya anda juga dilabelkan sebagai penjenayah CSS.
Gaya CSS peringkat seterusnya untuk kursorApr 23, 2025 am 11:04 AMKursor adat dengan CSS adalah hebat, tetapi kita boleh mengambil sesuatu ke peringkat seterusnya dengan JavaScript. Menggunakan JavaScript, kita boleh beralih antara negeri kursor, letakkan teks dinamik dalam kursor, gunakan animasi kompleks, dan gunakan penapis.
Dunia bertembung: Pengesanan Perlanggaran Kerangka Key menggunakan pertanyaan gayaApr 23, 2025 am 10:42 AMAnimasi CSS interaktif dengan unsur -unsur yang menghilangkan satu sama lain kelihatan lebih masuk akal pada tahun 2025. Walaupun tidak perlu untuk melaksanakan pong dalam CSS, peningkatan fleksibiliti dan kuasa CSS mengukuhkan kecurigaan Lee '
Menggunakan penapis latar belakang CSS untuk kesan UIApr 23, 2025 am 10:20 AMPetua dan cara untuk menggunakan harta penapis latar belakang CSS ke antara muka pengguna gaya. Anda akan belajar bagaimana untuk meletakkan penapis latar belakang di antara pelbagai elemen, dan mengintegrasikannya dengan kesan grafik CSS yang lain untuk membuat reka bentuk yang rumit.
SMIL ON?Apr 23, 2025 am 09:57 AMNah, ternyata ciri-ciri animasi terbina dalam SVG ' s tidak pernah ditamatkan seperti yang dirancang. Pasti, CSS dan JavaScript lebih mampu membawa beban, tetapi ia baik untuk mengetahui bahawa SMIL tidak mati di dalam air seperti sebelumnya
'Cantik' berada di mata penontonApr 23, 2025 am 09:40 AMYay, let ' s melompat untuk teks-wrap: Pretty Landing dalam Pratonton Teknologi Safari! Tetapi berhati -hatilah bahawa ia ' s berbeza dari bagaimana ia berfungsi dalam pelayar kromium.
CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AMKemas kini trik CSS ini menyoroti kemajuan yang ketara dalam almanak, penampilan podcast baru-baru ini, panduan kaunter CSS baru, dan penambahan beberapa penulis baru yang menyumbang kandungan berharga.
Ciri tailwind ' s @ply lebih baik daripada bunyiApr 23, 2025 am 09:23 AMKebanyakan masa, orang mempamerkan ciri-ciri Tailwind ' Apabila dipamerkan dengan cara ini, @apply tidak menjanjikan sama sekali. Jadi obvio
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
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
