800、1280、1440、1600、1920
在<head></head>标签中，使用js
<script>
if(document.screen.width>=1680){
document.write('<link rel="stylesheet" href="css/css1680.css">')
}else if(document.screen.width>=1600){
document.write('<link rel="stylesheet" href="css/css1600.css">')
}else{
document.write('<link rel="stylesheet" href="css/css800.css">')
}
</script>
二、媒体查询
css3新特性
1、多个样式表
<link rel="stylesheet" media="screen and (max-device-width:1280px)" href="css/css1280.css">
<link rel="stylesheet" media="screen and (min-device-width:1280px) and (max-device-width:1680px)" href="css/css1680.css">
<link rel="stylesheet" media="screen and (min-device-width:1680px)" href="css/css1920.css">
2、一个样式表
@media screen and (min-width:1920px){大于1920px的样式}
@medie screen and (min-width:1680px) and (max-width:1920px){1680-1920的样式}
@media screen and (max-width:1680px){小于1680px的样式}
可以用谷歌浏览器里面有iPhone5的尺寸，然后用媒体查询它的宽度就行了媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的一部分。
媒体查询有两个关键词min-width和max-width, 接触过媒体查询的同学可能会认同我， 这两个关键词很绕；从字面上理解它们可能不那么容易，以至于我每次都需要在脑海里面不断演算，然后小心翼翼地测试效果（大概和写正则表达式的感觉差不多）。
需要提醒一下的是CSS的优先级概念，在样式表中越后的样式优先级越高，就是后面的样式会覆盖前面的样式。在这个例子中，我们先设定了默认颜色为灰色。如果width大于960px的，会显示灰色。
假设width为750px，会先匹配到灰色，再匹配红色，最终显示了橙色。由于width等于750px，它不在0-550px和0-320px这个范围，浏览器不会解析这些样式。
