一、多媒体类型

（一）all

最常用的属性。用于所有多媒体类型屏幕。

（二）print

用于打印机屏幕。

（三）screen

用于电脑屏幕、平板屏幕、手机屏幕等。

（四）speech

用于阅读器屏幕。

二、知识详解

@media all and (min-width: 600px) {}规定屏幕宽度大于等于600px时，屏幕内容将会发生的改变。

@media all and (max-width: 800px) {}规定屏幕宽度小于等于800px时，屏幕内容将会发生的改变。

@media all and (min-width: 600px) and (max-width:800px) {}规定屏幕宽度在600px至800px区间内，屏幕内容将会发生的改变。

<link rel="stylesheet" href="" media="all and (min-width: 600px) and (max-width: 800px)">规定屏幕宽度在600px（含）至800px（含）区间内，屏幕内容将根据外部样式表发生改变。

三、知识扩展

（一）em与rem

em是根据父元素的大小。

rem是根据根元素（html）的大小。谷歌浏览器（Google Chrome）根元素（html）的默认大小为16px，但无法保证其他浏览器根元素（html）的默认大小，所以建议手动设置根元素（html）的大小。

（二）水平垂直居中的方式

1. inline element

让height与line-height相同，并设置text-align: center;。代码如下：

width: 50px;
height: 100px;
line-height: 100px;
text-align: center;

2. block element

（1）flex布局

display: flex;
justify-content: center;
align-items: center;

（2）采用绝对定位

margin-top和margin-left分别为width和height值一半的相反数。

width: 100px;
height: 100px;
position: absolute;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-50px;

（3）css3 transform

position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);

（4）远古办法

盒子必须有宽度和高度，但是不需要去计算偏移盒子的宽高。

position: absolute;
top:0;
right:0;
bottom: 0;
left:0;
margin:auto;