Home >Web Front-end >HTML Tutorial >css3 media note_html/css_WEB-ITnose

css3 media note_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:41:171054browse

css3 media

Media Type Media Type

The W3C lists ten media types in total, as shown in the table:

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

Among them, screen, all, and print are the most Three common media types.

Media type reference method

  1. link method : introduce the media type when the 2cdf5bf648cf2f33323966d7f58a7f3f tag references the style, specified through the media attribute Different media types.

    <link rel="stylesheet" type="text/css" href="style.css" media="screen">
  2. xml method : Similar to the media type introduced by link, it is also specified through the media attribute.

    <?xml-stylesheet type="text/css" media="screen" href="style.css">
  3. @import method: @import is one of the methods used to reference style files, and can also be used to reference types. There are two main ways to introduce media types with @import.

    One is to call another file through @import in the style file;

    @import url(style.css) screen;

    The other is to introduce it in the tag c9ccee2e6ea535a969eb3f532ad9fe89.

    <style>	@import url(style.css) screen;</style>
  4. @media method: @media is a newly introduced feature in CSS3, called media query. Media types can be introduced into the page through this attribute. Similar to @import, there are two types.

    One is to reference the media type through @media in the style file;

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

    The other is to introduce it in the tag c9ccee2e6ea535a969eb3f532ad9fe89.

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

The above four methods can all reference media types. It is recommended to use the first and fourth methods.

Media Query media properties

W3C lists 13 commonly used features in CSS3, as shown in the table:

属性 值 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 (媒体特性){/*样式*/}

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

  1. 最大宽度max-width

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

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

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn