Apakah kegunaan pertanyaan media media dalam css3-Soal Jawab bahagian hadapan-php.cn

Apakah kegunaan pertanyaan media media dalam css3

WBOY

Lepaskan： 2022-04-28 15:45:22

asal

2036 orang telah melayarinya

Dalam CSS3, pertanyaan media media digunakan untuk menentukan gaya yang berbeza untuk jenis media atau peranti yang berbeza Gaya yang berbeza boleh ditetapkan untuk saiz atau resolusi skrin yang berbeza Sintaksnya ialah "@media bukan|sahaja Jenis media dan (. ...){Kod gaya CSS}".

Apakah kegunaan pertanyaan media media dalam css3

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

Apakah penggunaan pertanyaan media media dalam css3

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.

Pertanyaan media boleh digunakan untuk menyemak banyak perkara seperti:

Lebar dan ketinggian port pandangan
The lebar dan tinggi peranti Ketinggian
Orientasi (adakah telefon atau tablet dalam mod landskap atau potret?)
Resolusi

Sintaksnya ialah

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

Salin selepas log masuk

bukan, sahaja dan maksud kata kunci dan:

bukan: Kata kunci bukan ialah makna keseluruhan pertanyaan media pula.
sahaja: Satu-satunya kata kunci menghalang pelayar lama yang tidak menyokong pertanyaan media dengan atribut media daripada menggunakan gaya yang ditentukan. Ia tidak mempunyai kesan pada pelayar moden.
dan: Kata kunci dan kata kunci menggabungkan sifat media dengan jenis media atau sifat media lain.

Semuanya adalah pilihan. Walau bagaimanapun, jika anda menggunakan bukan atau sahaja, anda juga mesti menentukan jenis media.

Anda juga boleh menggunakan helaian gaya yang berbeza untuk media yang berbeza, seperti ini:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

Salin selepas log masuk

Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
    background-color:lightgreen;
}
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
<SCRIPT>
<!--
function resize_window() {
        window.open (&#39;http://www.runoob.com/try/demo_source/trycss3_media_example1.htm&#39;,&#39;newwindow&#39;,&#39;height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no&#39;)
}
//写成一行
-->
</SCRIPT>
</body>
</html>

Salin selepas log masuk

Hasil output:

Apakah kegunaan pertanyaan media media dalam css3

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah kegunaan pertanyaan media media dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!