首页 / CSS3 / 深入了解CSS3媒体

深入了解CSS3媒体

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了深入了解CSS3媒体，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3564字，纯文字阅读大概需要6分钟。

内容图文

css3 媒体

Media Type 媒体类型

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

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

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

媒体类型的引用方法

  1. link方法：在<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>中引入。

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

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

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

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

    另一种是在标签<style>中引入。

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

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

Media Query媒体特性

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

属性值Min/Max描述
color整数Yes每种色彩的字节数
color-index整数Yes色彩表中的色彩数
device-aspect-ratio整数/整数Yes宽高比例
device-heightLengthYes设备屏幕的输出高度
device-widthLengthYes设备屏幕的输出宽度
grid整数No是否基于栅格的设备
heightLengthYes渲染页面的高度
monochrome整数Yes单色帧缓冲器中每像素字节
resolution分辨率(dpi/dpcm)Yes分辨率
scanProgressive interlacedNoTv媒体类型的扫描方式
widthLengthYes渲染界面的宽度
orientationportrait/landsscapeNo横屏或竖屏

Media Query使用方法

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

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

  1. 最大宽度max-width

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

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

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

  2. 最小宽度min-width

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

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

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

  3. 多个媒体特性使用

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

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

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

  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">

CSS3 媒体特性完。

以上就是深入了解CSS3媒体的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的深入了解CSS3媒体全部内容，希望文章能够帮你解决深入了解CSS3媒体所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/414077.html

来源：【匿名】