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

通过使用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。

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

 
 
 
 
 
 
 
 
 
DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度