css3 媒体

css3 媒体 Media Type 媒体类型 媒体类型是CSS2中一个非常有用的属性。通过媒体类型可以对不同的设备指定不同的样式。 W3C共列出十种媒体类型，如表：

值 设备类型 all 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打字机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种投影设备 Screen 电脑显示器 Speech 语音或音频合成器 TV 电视机类型设备 Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端 其中screen，all，print为最常见的三种媒体类型。

媒体类型的引用方法 link方法 ：在 标签引用样式的时候引入媒体类型，通过media属性指定不同的媒体类型。

Salin selepas log masuk xml方法 ：与link引入媒体类型类似，也是通过media属性来指定。

Salin selepas log masuk @import方法 ： @import 是用来引用样式文件的方法之一，同样可以用来引用类型。 @import 引入媒体类型主要有两种方式。

一种是在样式文件中通过 @import 调用另一个文件；

@import url(style.css) screen; Salin selepas log masuk 另一种是在标签 中引入。

@import url(style.css) screen; Salin selepas log masuk @media方法 ： @media 是CSS3中新引进的特性，称为媒体查询。在页面中可以通过这个属性来引入媒体类型。与 @import 类似，也有两种类型。

一种是在样式文件中通过 @media 引用媒体类型；

@media screen{ 选择器{/*样式*/} } Salin selepas log masuk 另一种是在标签 中引入。

@media screen{ 选择器{/*样式*/} } Salin selepas log masuk 以上四种方法都可以引用媒体类型，推荐使用第一种与第四种。

Media Query媒体特性 媒体特性是CSS3对媒体类型的增强版。 W3C共列出13种CSS3中常用的特性，如表：

属性 值 Min/Max 描述 color 整数 Yes 每种色彩的字节数 color-index 整数 Yes 色彩表中的色彩数 device-aspect-ratio 整数/整数 Yes 宽高比例 device-height Length Yes 设备屏幕的输出高度 device-width Length Yes 设备屏幕的输出宽度 grid 整数 No 是否基于栅格的设备 height Length Yes 渲染页面的高度 monochrome 整数 Yes 单色帧缓冲器中每像素字节 resolution 分辨率(dpi/dpcm) Yes 分辨率 scan Progressive interlaced No Tv媒体类型的扫描方式 width Length Yes 渲染界面的宽度 orientation portrait/landsscape No 横屏或竖屏 Media Query使用方法 @media 媒体类型 and (媒体特性){/*样式*/} Salin selepas log masuk 使用Media Query时必须要使用 @media 开头，然后指定媒体类型，随后是指定媒体特性。

最大宽度 max-width

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

@media screen and (max-width:480px){ p{ width:400px; } } Salin selepas log masuk 意思是当屏幕小于或等于480px时，p的宽度被重置为400px。

最小宽度 min-width

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

@media screen and (min-width:900px){ p{width:900px;} } Salin selepas log masuk 当最小宽度等于或大于900px时，p的宽度重置为900px

多个媒体特性使用

Media Query可以使用关键词“ and ”将多个媒体特性结合在一起。

@media screen and (min-width:400px) and (max-width:600px){ p{ background:red; } } Salin selepas log masuk 当屏幕宽度在400px~600px时，p的背景色变为红色。

设备屏幕的输出宽度 Device width

还可以根据屏幕尺寸设置相应的样式

Salin selepas log masuk 样式适用于最大宽度为500px，这里的max-device-width所指的是实际分辨率，也就是指可视面积分辨率。

not 关键词

关键词not用来排除某种制定的媒体类型，也就是说对后面的表达式执行取反操作。

@media not print and (max-widht:1200px){/*样式*/} Salin selepas log masuk 样式代码将被使用在除了打印设备和屏幕宽度小于1200px的所有设备。

only 关键词

only用来指定某种特定的媒体类型，可以排除不支持媒体查询(Media Query)的浏览器。only很多时候是用来对不支持Media query却支持Media Type的设备隐藏样式表。因此支持媒体特性的设备正常调用样式，此时就当only不存在；不支持媒体特性但支持媒体类型的设备，就不会读取样式，因为先读取的是only而不是screen；不支持Media Query的浏览器，不论是否支持only，样式都不会被采用。

Salin selepas log masuk CSS3 媒体特性完。

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

深入了解CSS3媒体

css3 媒体

Media Type 媒体类型

媒体类型的引用方法

值	设备类型
all	所有设备
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打字机
Handheld	便携设备
Print	打印用纸或打印预览视图
Projection	各种投影设备
Screen	电脑显示器
Speech	语音或音频合成器
TV	电视机类型设备
Tty	使用固定密度字母栅格的媒介，比如电传打字机和终端