如何为CSS指定对应的Media type
One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device(盲人使用的設(shè)備上), etc.
style sheet設(shè)置的目的，是為了描述文檔如何在不同的media類(lèi)型上呈現(xiàn)的。
Certain CSS properties are only designed for certain media (e.g., the ‘page-break-before’ property only applies to paged media).
某些 CSS property 只有在應(yīng)用于某些 media 上時(shí)才有意義，比如page-break-before 屬性只能應(yīng)用在paged media上。
occasion, however, style sheets for different media types may share a property, but require different values for that property.
不同media類(lèi)型上的style sheet可能共享同名property，但是值有所不同。
For example, the ‘font-size’ property is useful both for screen and print media. The two media types are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper.
比如 font-size，在screen和print media上都有效，但是值不同。
Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.
因此，我們使用style sheet時(shí)，至少需要為其某一部分指定適配的media type.
具體語(yǔ)法：
Specify the target medium from a style sheet with the @media or @import at-rules. @import url("fancyfonts.css") screen; @media print {/* style sheet for print goes here */ } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML><HEAD><TITLE>Link to a target medium</TITLE><LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css"></HEAD><BODY><P>The body...</BODY> </HTML> @media print {body { font-size: 10pt }}@media screen {body { font-size: 13px }}@media screen, print {body { line-height: 1.2 }}media group和media type的關(guān)系
SAP Spartacus里使用media type @media的例子：
// Extra small devices (portrait phones, less than 576px)@media (max-width: 575px) {.asm-bar-branding .asm-title {display: none;}.asm-alert {margin-top: 30px;}}總結(jié)
以上是生活随笔為你收集整理的如何为CSS指定对应的Media type的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Epic火炬之光2控制台代码有哪些
- 下一篇： CSS 基本样式