一、根据不同的分辨率,加载不同的css样式文件
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的样式}