浏览器多分辨率适配方法总结(跨平台)
通过使用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>