CSS3 @media screen 屏幕自适应

注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，

@media (min-width: 1200){ //>=1200的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 768px){ //>=768的设备 }

因为如果是1440,由于1440>768那么你的1200就会失效。

所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=767的设备 }

另一种是直接在link中判断设备的尺寸，然后引用不同的css文件：

意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

在media属性里：

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型（还有print）

and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。

常用的：

小于768的

768px

768和992之间的

992px

992和1200间的

1200px

大于1200