css3 媒体记_html/css_WEB-ITnose

css3 媒体

Media Type 媒体类型

　　w3c共列出十种媒体类型，如表：

　　其中screen，all，print为最常见的三种媒体类型。

媒体类型的引用方法

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

   <link rel="stylesheet" type="text/css" href="style.css" media="screen">

   登录后复制

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

   <?xml-stylesheet type="text/css" media="screen" href="style.css">

   登录后复制

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

   立即学习“前端免费学习笔记（深入）”；

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

   @import url(style.css) screen;

   登录后复制

   另一种是在标签

   <style>	@import url(style.css) screen;</style>

   登录后复制

4. @media方法：@media是CSS3中新引进的特性，称为媒体查询。在页面中可以通过这个属性来引入媒体类型。与@import类似，也有两种类型。

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

   @media screen{	选择器{/*样式*/}}

   登录后复制

   另一种是在标签

   <style>	@media screen{		选择器{/*样式*/}	}</style>

   登录后复制

以上四种方法都可以引用媒体类型，推荐使用第一种与第四种。

Media Query媒体特性

　　W3C共列出13种CSS3中常用的特性，如表：

Media Query使用方法

@media 媒体类型 and (媒体特性){/*样式*/}

　　使用Media Query时必须要使用@media开头，然后指定媒体类型，随后是指定媒体特性。

1. 最大宽度max-width

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

   @media screen and (max-width:480px){	div{		width:400px;	}}

   登录后复制

   意思是当屏幕小于或等于480px时，div的宽度被重置为400px。

   

   AI新媒体文章

   专为新媒体人打造的AI写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能

   75

   查看详情

2. 最小宽度min-width

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

   @media screen and (min-width:900px){	div{width:900px;}}

   登录后复制

   当最小宽度等于或大于900px时，div的宽度重置为900px

3. 多个媒体特性使用

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

   @media screen and (min-width:400px) and (max-width:600px){	div{		background:red;	}}

   登录后复制

   当屏幕宽度在400px~600px时，div的背景色变为红色。

4. 设备屏幕的输出宽度Device width

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

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

   登录后复制

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

5. not关键词

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

   @media not print and (max-widht:1200px){/*样式*/}

   登录后复制

   样式代码将被使用在除了打印设备和屏幕宽度小于1200px的所有设备。

6. only关键词

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

   <link rel="stylesheet" media="only screen and (max-device-width:1200px)" href="style.css">

   登录后复制