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

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

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

在media属性里：

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型

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

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

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时，应用styleB.css

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/

.class {

background: #ccc;

}

}

===============================多设备兼容============================

.btn-note-add{ width:40px; height:40px;bottom:70px; right:10px; position:fixed;}

.btn-note-add a{ background-color:#FDC115; color:#FFF;width:40px; height:40px; line-height:40px; display:block; text-align:center; border-radius:50%; font-size:30px;}



/*pc宽度大于1200px*/

@media screen and (min-width:1200px){

.btn-note-add{ width:40px; height:40px;bottom:70px; right:38%; position:fixed;}

.btn-note-add a{ background-color:#FDC115; color:#FFF;width:40px; height:40px; line-height:40px; display:block; text-align:center; border-radius:50%; font-size:30px;}

}



/*平板 小于1199 大于501px*/

@media screen and (max-width:1199px) and (min-width:501px){

.btn-note-add{ width:40px; height:40px;bottom:70px; right:15%; position:fixed;}

.btn-note-add a{ background-color:#FDC115; color:#FFF;width:40px; height:40px; line-height:40px; display:block; text-align:center; border-radius:50%; font-size:30px;}

}



/*手机最大宽度500*/

@media screen and (max-width:500px){

.btn-note-add{ width:40px; height:40px;bottom:70px; right:10px; position:fixed;}

.btn-note-add a{ background-color:#FDC115; color:#FFF;width:40px; height:40px; line-height:40px; display:block; text-align:center; border-radius:50%; font-size:30px;}

}