基本寫法
準(zhǔn)備工作2：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
準(zhǔn)備工作2：加載兼容文件JS
因?yàn)镮E8既不支持HTML5也不支持CSS3 @media 冯吓，所以我們需要加載兩個(gè)JS文件校坑，來(lái)保證我們的代碼實(shí)現(xiàn)兼容效果：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
媒體類型（mediaType ）
all 用于所有多媒體類型設(shè)備
print 用于打印機(jī)
screen 用于電腦屏幕宾娜，平板侈百，智能手機(jī)等缀旁。
speech 用于屏幕閱讀器
屏幕適配
@media screen and (min-width: 1200px) {
css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
css-code;
}
@media screen and (max-width: 479px) {
css-code;
}
