Adakah pertanyaan media merupakan atribut baharu dalam css3?

Pertanyaan media ialah ciri baharu CSS3, yang boleh digunakan untuk reka bentuk responsif halaman menggunakan pertanyaan "@media", ia boleh digunakan untuk menentukan gaya yang gagal untuk jenis media yang berbeza, dan boleh juga digunakan untuk skrin yang berbeza Gaya saiz menetapkan gaya yang berbeza, sintaksnya ialah "@media [media media] dan|atau (keadaan) dan|atau (keadaan){gaya}".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Adakah pertanyaan media merupakan atribut baharu css3

1. Pertanyaan media ialah ciri baharu css3, yang boleh digunakan untuk reka bentuk responsif halaman.

2. Anda boleh mereka bentuk berbilang set gaya yang berbeza untuk skrin yang berbeza dan resolusi yang berbeza.

Sintaks Pertanyaan Media

@media [媒体介质] and|or (条件) and|or (条件){
//样式
.class{
}
}
//页面可见高度小于等于500px时，设置字体大小为10px
@media screen and(max-height:500px){
.class{
font-size:10px
}
}

Menggunakan pertanyaan @media, anda boleh menentukan gaya yang berbeza untuk jenis media yang berbeza.

@media boleh menetapkan gaya yang berbeza untuk saiz skrin yang berbeza, terutamanya jika anda perlu menyediakan halaman responsif, @media sangat berguna.

Apabila anda menetapkan semula saiz penyemak imbas, halaman itu juga akan dipaparkan semula berdasarkan lebar dan ketinggian penyemak imbas.

Sintaks CSS

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

tidak, dan, dan hanya boleh digunakan untuk bersama membina pertanyaan media yang kompleks Anda juga boleh menggabungkan berbilang pertanyaan media menjadi satu peraturan dengan memisahkannya dengan koma. .

bukan, sahaja dan dan makna kata kunci:

• bukan: Operator bukan digunakan untuk menafikan pertanyaan media Jika syarat ini tidak dipenuhi, ia akan kembali benar, sebaliknya ia kembali palsu. Jika terdapat dalam senarai pertanyaan yang dipisahkan koma, ia hanya akan menafikan pertanyaan khusus yang digunakan. Jika anda menggunakan operator bukan, anda juga mesti menentukan jenis media.

• sahaja: Satu-satunya pengendali digunakan untuk menggunakan gaya hanya jika keseluruhan pertanyaan sepadan dan berguna untuk menghalang penyemak imbas lama daripada menggunakan gaya yang dipilih. Apabila hanya tidak digunakan, pelayar lama hanya akan mentafsir skrin dan (lebar maksimum: 500px) sebagai skrin, mengabaikan pertanyaan yang lain dan menggunakan gayanya pada semua skrin. Jika anda menggunakan satu-satunya operator, anda juga mesti menentukan jenis media.

• , (koma) Koma digunakan untuk menggabungkan berbilang pertanyaan media menjadi satu peraturan. Setiap pertanyaan dalam senarai dipisahkan koma diproses secara berasingan daripada pertanyaan lain. Oleh itu, jika sebarang pertanyaan dalam senarai adalah benar, keseluruhan kenyataan media akan kembali benar. Dalam erti kata lain, senarai itu berkelakuan seperti logik atau pengendali.

• dan: dan operator digunakan untuk menggabungkan berbilang peraturan pertanyaan media ke dalam satu pertanyaan media Apabila setiap peraturan pertanyaan adalah benar, pertanyaan media itu juga Digunakan untuk menggabungkan fungsi media dengan jenis media.

Jenis media menerangkan kategori umum peranti. Melainkan pengendali logik bukan atau sahaja digunakan, jenis media adalah pilihan dan semua jenis (secara tersirat) digunakan.

Anda juga boleh menggunakan fail gaya yang berbeza untuk media yang berbeza:

<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

(Mempelajari perkongsian video: tutorial video css, tutorial video html )

Atas ialah kandungan terperinci Adakah pertanyaan media merupakan atribut baharu dalam css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!