一.根据不同的分辨率,加载不同的CSS样式文件
- 这个方法的思路是,分别针对800、1280、1440、1600、1920等分辨率,创建不同的css文件。然后在各种分辨率下,写css样式表。
- 我们只需要在我们的HTML页面的标签中,使用js,根据不同的电脑分辨率,加载不同的css样式表。注意这里的js一定要写在标签里面,这样在加载页面内容之前,可以提前把css样式表加载出来
<script>
// 分辨率大于等于1680,大部分为1920的情况下,调用此css
if(window.screen.width >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
// 分辨率再在1600-1680的情况下,调用此css
else if(window.screen.width >= 1600){
document.write('<link rel="stylesheet" href="css/index_1600.css">');
}
// 分辨率小于1600的情况下,调用此css
else{
document.write('<link rel="stylesheet" href="css/index.css">');
}
</script>
- 这样的话,就可以根据不同电脑的分辨率,就在不同的css样式表。由此我们便完成了页面使用不同的分辨率。
二.采用媒体查询
- 媒体查询是CSS3的新特性,绝大多数浏览器都可兼容这一特性。这个方法的思路也是根据不同的分辨率,应用不同的css样式。
1.根据不同的分辨率,引入不同的css样式表
- 这个方法和方法一相同,也是通过判断电脑的分辨率,来引入相对应的css样式表。
2.在同一个css样式表中,根据不同的分辨率,写不同的css样式
- 这个方法只有一个css演示表,在这个样式表里面,根据不同的分辨率,写不同的css样式。
<style media="screen">
/*分辨率低于1280,采用下面的样式*/
@media screen and (max-device-width:1280px){
div{
width: 200px;
height: 200px;
background-color: green;
}
}
/*分辨率高于1440,采用下面的样式*/
@media screen and (min-device-width: 1440px){
div{
width: 300px;
height: 300px;
background-color: red;
}
}
</style>