media type 媒体类型

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在正式了解 media query 之前,我们可以先了解一下根据媒体的类型加载不同样式表的方法。我们可以专门针对 screen ,tv, print,projection 这些媒体类型来添加样式。

screen 是屏幕设备,比如电脑,智能手机,平板,都是这个类型的媒体。 tv, 是电视媒体,print 是打印机,projection 是投影仪。

另外还有一些媒体类型,你可以参考一下这个地址 :https://developer.mozilla.org/en-US/docs/CSS/@media

常用的媒体类型就是 screen 屏幕设备,还有 print 打印机 … 另外如果我们在嵌入样式表的时候,不指定应用的媒体类型,那么默认这个媒体类型是 all ,也就是样式表会应用在所有的媒体类型上 …

下面我们通过一个简单的演示,来理解一下针对媒体类型的样式表 …

打开资料包 xx-xx

这是一个很简单的网页 … 我们要在 css 这个目录下面 … 新建两个样式表 …. 一个命名为 style.css … 一会我们让这个样式表应用在所有的媒体类型上…

再创建一个 print.css … 这个样式我们把它用在 print 打印机这个媒体类型上 …

在网页上,用 <link> 来嵌入这两个样式表 …

<link href="css/style.css" rel="stylesheet">

在这行代码里,我们并没有使用 media 属性去指定它的媒体类型 … 所以这个 style.css 默认会用在所有的媒体类型上 …

再嵌入另一个样式表 … 复制一下 … 修改下样式表的名称 … 然后在这里,我们添加一个 media 属性 … 属性的值设置为 print …

<link href="css/print.css" media="print" rel="stylesheet">

这样当用户在打印这个网页的时候,浏览器会载入这个样式表里的样式 ..

添加样式

下面我们分别在这两个样式表里添加点简单的样式 … 打开 style.css … 使用 body 标签作为样式的选择器 … 添加一个背景颜色 .. 设置为 黑色 ..

再为文字设置一个默认的颜色 … 用 color … 设置为 白色

body{
background:#000;
color:#fff
}

因为 style.css 会用在所有的媒体类型上… 你会看到,网页的背景会变成黑色 … 文字的颜色会是 白色 …

下面我们可以使用打印预览,看一下打印这个网页的效果 … 文件 … 打印 …

浏览器会为打印添加默认的样式 … 你会看到,文字变成了灰色 … 而且并没有背景颜色 … 因为在打印的选项里,没有勾选 背景颜色和图片 …

我们可以勾选一下看看 … 现在,打印预览里的样式跟网页上的样式是一样的 … 黑色背景 … 白色文字 …

这种样式并不适合打印 … 所以我们可以再去设置一下专门为打印准备的样式 … (#取消)

打印

打开 print.css … 因为这个样式表是在 style.css 样式表的下面嵌入的 … 所以在这里定义的样式,可以去覆盖 style.css 样式表里的样式 …

这里我们重新设计一下 body 标签的样式 … 我们把背景颜色设置为白色 … background:#fff … 然后再把文字的颜色设置为黑色 … color:#000 …

保存 …

回到网页 … 刷新 ….

在网页上的样式并没有什么变化 … 打开 文件 … 打印 …

现在, 你会发现,打印预览这里,会使用我们在 print.css 样式表里设置的样式 … 背景是白色 … 文字是黑色 …

media type 媒体类型《 响应式网页设计 》

统计

11716
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点