Apakah pernyataan pertanyaan media html5?

pernyataan pertanyaan media HTML5 terdiri daripada jenis media dan satu atau lebih ungkapan bersyarat untuk mengesan ciri media yang boleh digunakan untuk pengesanan dalam pertanyaan media termasuk lebar, tinggi, warna, dsb.; pertanyaan media, anda boleh Sesuaikan kesan paparan untuk peranti output tertentu tanpa mengubah kandungan halaman.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi HTML5, komputer DELL G3

Apakah pertanyaan media html5 kenyataan?

Pertanyaan Media HTML5

Pertanyaan Media

- Apakah pertanyaan media?

Pertanyaan media membenarkan 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). pengesanan Sifat media terdiri daripada ungkapan bersyarat. 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.

- Kebolehgunaan pertanyaan media dan susun atur kotak fleksibel

Pertanyaan media: Sebaik-baiknya gunakan pertanyaan media apabila struktur halaman berubah. Kotak fleksibel: Jika hanya lebar dan ketinggian berubah, cuba gunakan kotak fleksibel

- Kaedah penggunaan

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>

@jenis media media dan (ciri media) {gaya anda}

Untuk menggunakan Pertanyaan Media, anda mesti bermula dengan "@media", kemudian nyatakan jenis media (juga dipanggil jenis peranti), dan kemudian nyatakan ciri media (juga dipanggil ciri peranti). Kaedah penulisan sifat media sangat serupa dengan kaedah penulisan gaya Ia terutamanya dibahagikan kepada dua bahagian Bahagian pertama merujuk kepada sifat media, dan bahagian kedua ialah nilai yang ditentukan oleh sifat media, dan titik bertindih digunakan di antara dua bahagian. Contohnya:

(max-width: 480px)

Berbeza daripada atribut CSS, sifat media menggunakan min/maks untuk mewakili lebih besar daripada sama atau kurang daripada sebagai pertimbangan logik, bukannya menggunakan kurang daripada (<) dan lebih besar daripada ( >) menilai dengan simbol sedemikian.

-Jenis Media

all	所有媒体（默认值）
screen	彩色屏幕
print	打印预览

semua

Semua media (lalai nilai)

width	（可加max min前缀）
height	（可加max min前缀）
device-width	（可加max min前缀）
orientation	portrait竖屏/landscape横屏

skrin

Skrin warna td>

cetak

Pratonton cetak

-Atribut media tr>

- 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。

@media screen and (max-width:580px){
 body {
   background-color: red;
  }
}

上面表示的是：当屏幕小于或等于580px时,页面的背景颜色变为红色。

- 最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
  .wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

- 多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。  当屏幕在600px~900px之间时，body的背景色渲染为“blue”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:blue;}
}

- 设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

-逗号分隔列表

当使用媒体查询的逗号分隔列表时，如果列表中的任何媒体查询为true，样式表都会被运用。在逗号分隔列表中的每个媒体查询都被作为独立查询对待，运用到一个媒体查询上的任何操作符都不影响其它的。

例如，如果你想应用一套样式在宽度大于等于700px的设备上，或者采用横向模式的便捷式设备上，你可以这样：

@media (min-width: 700px),handheld and (orientation: landscape) { ... }

如果我使用的设备的屏幕宽度大于700px，媒体查询将返回true，样式将被运用。如果我使用的是横向的便捷式设备，第一个媒体查询返回false，但第二个媒体查询将返回true，样式仍将被使用。

- not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

- only关键词

only操作符表示仅在媒体查询匹配成功时应用指定样式。  可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="only"，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="screen"，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略

- 在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

-在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的打印预览上，或者被用于屏幕宽度大于或等于960px的设备上。

推荐学习：《HTML5视频教程》

lebar	(boleh menambah awalan min maks)
tinggi	(awalan maks min boleh ditambah)
lebar peranti	(awalan min maks boleh ditambah)
orientasi	potret skrin menegak/landskap skrin mendatar

Atas ialah kandungan terperinci Apakah pernyataan pertanyaan media html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!