Media In CSS3

作者:周星 发布:2017-10-07

我们经常在 CSS 中看到各种 media,但是很少有人知道它是干嘛用的,直到有一天我遇到这个需求,一个 div 及其内部元素 在 PC 上的样式和在手机端的样式有较大差别,这个时候就用到了 media,在 CSS2 中它称为 media type,而在 CSS3 中则为 media query,今天我们主要来看一下media query,它是响应性设计的基础,我们先看下面这个例子:

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

    它的意思是当设备为 PC/平板/手机,而且当前宽度小于300像素时,body 的背景色为淡蓝色。@media 用来定义不同 media 类型/设备下的不同样式。它的使用方式为:

@media not|only mediatype and (media feature) {
    CSS-Code;
}

在最前面的例子中,screen 就是 mediatype,and 为关键字,max-width 即 media feature。

你也可以根据不同的 media 来引用不同的 CSS 文件:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

Media Types

| Value | Description || all | Used for all media type devices || aural | Deprecated. Used for speech and sound synthesizers || braille | Deprecated. Used for braille tactile feedback devices || embossed | Deprecated. Used for paged braille printers || handheld | Deprecated. Used for small or handheld devices || print | Used for printers || projection | Deprecated. Used for projected presentations, like slides || screen | Used for computer screens, tablets, smart-phones etc. || speech | Used for screenreaders that "reads" the page out loud || tty | Deprecated. Used for media using a fixed-pitch character grid, like teletypes and terminals || tv | Deprecated. Used for television-type devices |

Media Features

| Value | Description || aspect-ratio | Specifies the ratio between the width and the height of the display area || color | Specifies the number of bits per color component for the output device || color-index | Specifies the number of colors the device can display || device-aspect-ratio | Specifies the ratio between the width and the height of the device || device-height | Specifies the height of the device, such as a computer screen || device-width | Specifies the width of the device, such as a computer screen || grid | Specifies whether the device is a grid device or not || height | Specifies the height of the display area, such as a browser window || max-aspect-ratio | Specifies the maximum ratio between the width and the height of the display area || max-color | Specifies the maximum number of bits per color component for the output device || max-color-index | Specifies the maximum number of colors the device can display || max-device-aspect-ratio | Specifies the maximum ratio between the width and the height of the device || max-device-height | Specifies the maximum height of the device, such as a computer screen || max-device-width | Specifies the maximum width of the device, such as a computer screen || max-height | Specifies the maximum height of the display area, such as a browser window || max-monochrome | Specifies the maximum number of bits per "color" on a monochrome (greyscale) device || max-resolution | Specifies the maximum resolution of the device, using dpi or dpcm || max-width | Specifies the maximum width of the display area, such as a browser window || min-aspect-ratio | Specifies the minimum ratio between the width and the height of the display area || min-color | Specifies the minimum number of bits per color component for the output device || min-color-index | Specifies the minimum number of colors the device can display || min-device-aspect-ratio | Specifies the minimum ratio between the width and the height of the device || min-device-width | Specifies the minimum width of the device, such as a computer screen || min-device-height | Specifies the minimum height of the device, such as a computer screen || min-height | Specifies the minimum height of the display area, such as a browser window || min-monochrome | Specifies the minimum number of bits per "color" on a monochrome (greyscale) device || min-resolution | Specifies the minimum resolution of the device, using dpi or dpcm || min-width | Specifies the minimum width of the display area, such as a browser window || monochrome | Specifies the number of bits per "color" on a monochrome (greyscale) device || orientation | Specifies the whether the display is in landscape mode or portrait mode || resolution | Specifies the resolution of the device, using dpi or dpcm || scan | Specifies progressive or interlaced scanning of a television || width | Specifies the width of the display area, such as a browser window |

支付宝扫码赞助博主


评论(0)