CSS 媒体类型

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 用于小型或手持设备
print 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

(0)
上一篇 2021年8月9日
下一篇 2021年8月9日

相关推荐

发表回复

登录后才能评论