响应式设计 @media

1.   响应式应用css的方法有两种

　　方法一：在link引用时声明样式应用的场景。

　　　　　　< link rel = "stylesheet" type = "text/css" href = "styleA.css" media = "screen and (min- 400px)" >

　　方法二：在css文件中或者<script></script>标签中

　　　　　　@media screen and (max- 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和小型电话
print	用于打印机和打印预览
projection	已废弃。 用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。 用于电视和网络电视

　　一般使用的是screen,并且用于响应式设计。大致使用方法如下：

　　@media screen and (max- 320px) {  /*匹配iphone4 iphone5*/

　　　　.class{

　　　　　　rule;　　　　

　　　　}

　　　　.a{font-size:12px;}

　　}

　　经常使用的内容有max-width,min-width,max-height,min-height