用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{}
}
分辨率可以从显示分辨率与图像分辨率两个方向来分类。
显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。
可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。
图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义。
这个方法的思路是，分别针对800、1280、1440、1600、1920等分辨率，创建不同的css文件。然后在各种分辨率下，写css样式表。
我们只需要在我们的HTML页面的<head></head>标签中，使用js，根据不同的电脑分辨率，加载不同的css样式表。注意这里的js一定要写在<head></head>标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来。
媒体查询是CSS3的新特性，绝大多数浏览器都可兼容这一特性。这个方法的思路也是根据不同的分辨率，应用不同的css样式。
这个思路和和方法一差不多，或者说方法一的思路和这个思路差不多，毕竟这也是官方的做法。我们有两种使用媒体查询的方式。
1.根据不同的分辨率，引入不同的css样式表
这个方法和方法一相同，也是通过判断电脑的分辨率，来引入相对应的css样式表。
2.在同一个css样式表中，根据不同的分辨率，写不同的css样式
这个方法只有一个css演示表，在这个样式表里面，根据不同的分辨率，写不同的css样式。
css具有媒体响应功能，可以判断屏幕宽度，从而加载设置的css
如下代码，当宽度小于1000px的时候加载css下的css-mobile.css
<link href="css/css-mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 1000px)">如下代码，当宽度大于1000px的时候加载css下的css-pc.css
<link href="css/css-pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)">
