浏览器多分辨率适配方法总结（跨平台）

最新推荐文章于 2024-07-09 18:01:50 发布

ZDM_9999

最新推荐文章于 2024-07-09 18:01:50 发布

阅读量1.2k

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/ZDM_9999/article/details/130037024

版权

文章介绍了如何利用CSS3的@media查询来针对不同分辨率的浏览器设置不同的页面布局，以实现响应式设计。对于不支持@media查询的IE9以下版本，可以通过引入Google的css3-mediaqueries-js.js脚本来实现兼容。

摘要由CSDN通过智能技术生成

通过使用css3 @media样式进行判断，判断不同分辨率浏览器（显示屏幕）显示不同宽度布局。

引入语法：

在css里使用如下标识符可以被ie识别而采用，其他浏览器会忽略if ie。

@media screen and (判断属性){ CSS样式选择器 }

引入示例：

/*分辨率在300-720之间*/
@media screen and (min-width: 300px){
}
/*分辨率在720-960之间*/
@media screen and (min-width: 720px){
}
/*分辨率在960-1024之间*/
@media screen and (min-width: 960px){
}
/*分辨率在1024-1280之间*/
@media screen and (min-width: 1024px){
}
/*分辨率在1280-1366之间*/
@media screen and (min-width: 1280px) {
.conter
    width: 1200px;
}
}
/*分辨率大于1366*/
@media screen and (min-width: 1366px) {
}

为了兼容IE9以下版本浏览器需要加入一个google的JS，当然可以下载引人html。

<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

兼容各大浏览器的完整示例

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>无标题文档</title> 
<style> 
.abc{ height:300px; border:1px solid #000; margin:0 auto} 
@media screen and (min-width: 1201px) { 
.abc {width: 1200px}  
} 
/* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 
 
@media screen and (max-width: 1200px) { 
.abc {width: 900px}  
} 
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 
 
@media screen and (max-width: 900px) { 
.abc {width: 200px;}  
} 
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ 
 
@media screen and (max-width: 500px) { 
.abc {width: 100px;}  
} 
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 
 
</style> 
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]--> 
</head> 
<body> 
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div> 
</body> 
</html>