用if else来判断，给<script>设置一个ID，再根据setAttribute改变src的属性。
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
.class{}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
.class{}
}
分辨率可以从显示分辨率与图像分辨率两个方向来分类。
显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。
可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。
图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义。
首先，在网页代码的头部，加入一行viewport元标签。原因不解释
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">选择加载CSS
<link rel="stylesheet" media="screen and (min-width:800px) and (max-device-width:1200px)" href="css/c1.css"/><link rel="stylesheet" media="screen and (min-width: 414px)" href="c2.css" >
<link rel="stylesheet" media="screen and (max-width: 900px)" href="c3.css">
具体的根据需要自行测试修改吧
