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(盲人使用的设备上), etc.

style sheet设置的目的，是为了描述文档如何在不同的media类型上呈现的。

Certain CSS properties are only designed for certain media (e.g., the ‘page-break-before’ property only applies to paged media).

某些 CSS property 只有在应用于某些 media 上时才有意义，比如page-break-before 属性只能应用在paged media上。

occasion, however, style sheets for different media types may share a property, but require different values for that property.

不同media类型上的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时，至少需要为其某一部分指定适配的media type.

具体语法：

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的关系

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;}}

如何为CSS指定对应的Media type相关推荐

Css中calc, support, media各自的含义及用法
1.calc calc() 函数用于动态计算长度值. ● 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): ● 任何长度值都可以使用calc()函数 ...
CSS中calc, support, media各自的含义及用法？
一 support 了解到了@support的这个属性,记录下: CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支 ...
321_MediaType Media Type 是什么
MediaType是什么 MediaType在网络协议的消息头里面叫做Content-Type 使用两部分的标识符来确定一个类型所以我们用的时候其实就是为了表明我们传的东西是什么类型比如 appl ...
ajax请求报错415,Unsupported Media Type 415问题解决办法（Ajax）
场景:Ajax传一个json对象到服务器,让参数自动封装至与json对象匹配的java对象中. 错误类型错误类型1: "status":415 "error" ...
ajax http415,Unsupported Media Type 415问题解决办法（Ajax）
场景:Ajax传一个jsuon对象到服务器,让参数自动封装至与json对象匹配的java对象中. 错误类型错误类型1: "status":415 "error" ...
415 (Unsupported Media Type)
接口: package com.wdg.index.controller;import java.util.Map;import org.springframework.web.bind.annota ...
Darwin Streaming Server服务器mp4文件点播返回”415 Unsupported Media Type“错误
Darwin Streaming Server中mp4文件点播失败,通过抓包发现服务器返回"415 Unsupported Media Type"错误,如下: RTSP/1.0 4 ...
在vue项目npm run build后，index.html中引入css和js 报MIME type问题
问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...
css中 media的用法,如何在css中正确使用@media
如何在css中使用@media作为特定分辨率?所以我想让我的侧栏更改取决于用户分辨率,所以我使用@media.如何在css中正确使用@media 这是示例代码: @media (max-width: ...

如何为CSS指定对应的Media type

media group和media type的关系

如何为CSS指定对应的Media type相关推荐

最新文章

热门文章