一种是直接在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)">
@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;}
}
