1. 响应式应用css的方法有两种
方法一：在link引用时声明样式应用的场景。
< link rel = "stylesheet" type = "text/css" href = "styleA.css" media = "screen and (min-width: 400px)" > 方法二：在css文件中或者<script></script>标签中
@media screen and (max-width: 320px) { /*匹配iphone4 iphone5*/
.class{
rule;
}
.a{font-size:12px;}
}
@media属性，在Css2便已经存在。可应用的属性有all，braille，embossed，handheld，print，projection，screen，speech，tty，tv.
| all | 用于所有设备 |
| aural | 已废弃。用于语音和声音合成器 |
| braille | 已废弃。 应用于盲文触摸式反馈设备 |
| embossed | 已废弃。 用于打印的盲人印刷设备 |
| handheld | 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话 |
| 用于打印机和打印预览 | |
| projection | 已废弃。 用于投影设备 |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
| tty | 已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备 |
| tv | 已废弃。 用于电视和网络电视 |
一般使用的是screen,并且用于响应式设计。大致使用方法如下：
@media screen and (max-width: 320px) { /*匹配iphone4 iphone5*/
.class{
rule;
}
.a{font-size:12px;}
}
经常使用的内容有max-width,min-width,max-height,min-height