CSS 媒体类型
CSS中的媒体类型语法允许你指定具体的css样式在指定的媒体上呈现。这一方式解决了在不同大小屏幕,媒体类型让也页面可以适配到制定的定义样式。
媒体类型 Media Types
以下的表格中展示了不同的媒体类型以及对应的CSS版本,兼容性和描述说明。
Media Types 媒体类型 | CSS Version 版本 | Compatibility 兼容性 | Description 简介 |
---|---|---|---|
all | CSS2 | 所有浏览器 | 用于所有媒体设备类型 |
aural | CSS2 | Opera | 用于语音和音乐合成器 |
braille | CSS2 | Opera | 用于触觉反馈设备 |
handheld | CSS2 | Chrome,Safari,Opera | 用于小型或手持设备 |
CSS2 | 所有浏览器 | 用于打印机 | |
projection | CSS2 | Opera | 用于投影图像,如幻灯片 |
screen | CSS2 | 所有浏览器 | 用于计算机显示器 |
tty | CSS2 | Opera | 用于使用固定间距字符格的设备。如电传打字机和终端 |
tv | CSS2 | Opera | 用于电视类设备 |
embossed | CSS2 | Opera | 用于凸点字符(盲文)印刷设备 |
@media 规则
CSS中的 @media 规则语法允许在相同样式表文件中为不同媒体设置不同的样式。例如以下的示例:
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
本例中定义了screen
, print
,以及screen,print
类型下p
元素中test
样式类的字体展示效果。
不同屏幕大小显示设置
我们可以通过@media screen
来实现网页中的自适应,也就是让网页在不同屏幕上根据样式定义显示不同的效果。
例如我们常常需要网页兼容电脑屏幕显示以及平板或手机屏幕显示,这是我们可以通过@media screen
来定义不同屏幕大小对应元素使用的的css样式来实现。
首先我们需要在网页头部加入如下的<meta>
内容。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
代码参数解释:
- width = device-width:宽度等于当前设备的宽度
- height = device-height:高度等于当前设备的高度
- initial-scale:初始的缩放比例(默认设置为1.0)
- minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
- maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
- user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
CSS3 Media screen编写
@media screen and (max-width: 767px){
body{
background: #000;
}
}
@media screen and (min-width: 768px){
body{
background: #060;
}
}
上面的代码表示如果屏幕最大宽度不超过767px
时,body的背景色为#000
,如果屏幕的最小宽度不小于768px
时,body的背景色为#060
;
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/59547.html