Layaran <style> media

Tanda <style> HTML

Definisi dan penggunaan

media Properti digunakan untuk menentukan media / peranti yang diujung gaya CSS (optimalisasi).

Properti ini digunakan untuk menentukan gaya yang berlaku untuk peranti tertentu (seperti iPhone), media suara, atau media cetak.

Petunjuk:Properti ini dapat menerima beberapa nilai.

Contoh

Contoh 1

Aturan gaya yang digunakan untuk cetak:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Coba sendiri

Contoh 2

Penggunaan khusus properti width dalam atribut media untuk membedakan dua grup gaya:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Coba sendiri

Keterangan:Yang digunakan saat lebar jendela pereka kurang dari 500 piksel adalah grup gaya pertama, dan saat lebar jendela lebih dari 500 piksel adalah grup gaya kedua.

Syarat

<style media="value>

Operator yang mungkin

Operator deskripsi
and Operator penetapan AND.
not Operator penetapan NOT.
, Operator penetapan.

Kondisi penggunaan gaya dapat dirancang dengan sangat halus. Yang pertama yang harus dijelaskan adalah jenis peranti yang dituju.

Peranti

Peranti deskripsi
all Default. Tersedia untuk semua peranti.
aural Perkakas penggabung suara.
braille Peranti umpan balik braille.
handheld Peranti tangki (layar kecil, bandwidth terbatas).
projection Proyektor.
print Mode pratinjau cetak / halaman cetak.
screen Layar komputer.
tty Teleprinter dan media yang sama yang menggunakan grid karakter jarak tetap.
tv Peranti kategori TV (resolusi rendah, kemampuan penyerapan terbatas).

Pemilik pereka menghuraikan pengaturan peranti. Beberapa jenis peranti (seperti screen dan print) memiliki penafsiran yang sama di beberapa pereka web, tetapi beberapa peranti lain (seperti handheld) dapat berbeda-beda. Oleh karena itu, memastikan bahwa penafsiran pereka web untuk peranti tertentu sesuai dengan yang Anda inginkan sangat penting.

kelembagaan

kelembagaan deskripsi
width

Tentukan lebar kawasan paparan target.

Boleh digunakan prefix "min-" dan "max-".

contoh: media="screen and (min-width:500px)"
height

Tentukan ketinggian kawasan paparan target.

Boleh digunakan prefix "min-" dan "max-".

contoh: media="screen and (max-height:700px)"
device-width

Tentukan lebar paparan/papir target.

Boleh digunakan prefix "min-" dan "max-".

contoh: media="screen and (device-width:500px)"
device-height

Tentukan ketinggian paparan/papir target.

Boleh digunakan prefix "min-" dan "max-".

contoh: media="screen and (device-height:500px)"
orientation

Tentukan arah paparan/papir target.

Nilai yang disokong: portrait atau landscape.

Karakteristik ini tidak mempunyai pengecaman.

contoh: media="all and (orientation: landscape)"
aspect-ratio

Tentukan rasio lebar/tinggi kawasan paparan target.

Boleh digunakan prefix "min-" dan "max-".

contoh: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Tentukan rasio lebar/tinggi peralatan paparan/papir target.

Boleh digunakan prefix "min-" dan "max-".

contoh: media="screen and (aspect-ratio:16/9)"
color

Tentukan bilangan bit setiap warna di paparan target.

Boleh digunakan prefix "min-" dan "max-".

contoh: media="screen and (color:3)"
color-index

Tentukan bilangan warna yang boleh diproses paparan target.

Boleh digunakan prefix "min-" dan "max-".

contoh: media="screen and (min-color-index:256)"
monochrome

Tentukan bilangan bit setiap piksel dalam frame buffer warna tunggal.

Boleh digunakan prefix "min-" dan "max-".

contoh: media="screen and (monochrome:2)"
resolution

Tentukan kepadatan piksel paparan/papir target (dpi atau dpcm).

Boleh digunakan prefix "min-" dan "max-".

contoh: media="print and (resolution:300dpi)"
scan

Tentukan mod skaning televisyen.

Nilai yang disokong adalah progressive dan interlace.

Karakteristik ini tidak mempunyai pengecaman.

contoh: media="tv and (scan:interlace)"
grid

Tentukan peranti output adalah grid atau bitmap.

Peranti grid menggunakan grid tetap untuk memaparkan kandungan, seperti terminal berdasarkan aksara dan ponsel yang memaparkan hanya satu baris.

Nilai yang disokong adalah 0 dan 1 (1 merepresentasikan peranti grid).

Karakteristik ini tidak mempunyai pengecaman.

Contoh: media="handheld and (grid:1)"

Karakteristik seperti width biasanya digunakan bersama-sama dengan pengecaman min dan max. Jika tidak digunakan pengecaman ini, penggunaan gaya bergantung kepada saiz tetingkap yang sangat tepat juga boleh, tetapi pengecaman ini akan membuat kondisi menjadi lebih fleksibel.

Karakteristik yang tersedia dijelaskan dan disebutkan dalam tabel di atas. Jika tidak disebutkan secara khusus, karakteristik ini boleh digunakan dengan min- dan max- untuk membentuk nilai batas bukannya nilai tepat.

Sebagai contoh, kelembagaan ini dijelaskan dan disebutkan dalam tabel di atas. Jika tidak disebutkan secara khusus, kelembagaan ini boleh digunakan dengan min- dan max- untuk membentuk nilai batas bukannya nilai tepat.

Dukungan Pemetaan Periklanan

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan

Tanda <style> HTML