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

通过使用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) {
.conterwidth: 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>

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

浏览器兼容性适配方法总结（跨浏览器）
浏览器兼容性问题适配,通过单独写css样式,适配各类浏览器兼容性,特别是针对IE8-9. 1-1.条件性注释(Conditional comments) [只有IE9及以前版本支持] 引入语法: 在c ...
iOS多分辨率适配综述
最近在掘金上分享了一篇关于性能优化文章iOS性能优化系列篇之"优化总体原则",第一次发表文章在网上,结果收到了好多人的正面的反馈,受到了一点点鼓舞,这篇文章是很久以前组内做的一个分 ...
【转】android多分辨率适配
前一阶段开发android项目,由于客户要求进行多分辨率适配,能够支持国内主流的分辨率手机.因此经过了几次开发走了很多弯路,目前刚刚领略了android多分辨率适配的一些方法. 先介绍一下所走的弯路, ...
html5页面适配方法,H5案例分享：HTML5移动页面适配方法
HTML5移动页面适配方法之前做过PC页面时考虑最多的是兼容,这是因为浏览器之间的差异引起的.而移动端是基本没有"兼容"的问题了,全是CSS3,是不是很开心,但是开心早了,因为适 ...
Android-适配各国语言、屏幕尺寸、系统版本及常见适配方法总结
<?xml version="1.0" encoding="utf-8"?> My Application Hello World! 西班牙语,/v ...
Unity多分辨率适配
UGUI: 原文链接:http://blog.csdn.net/dingkun520wy/article/details/49471789 1.Canvas的属性配置 2.Canvas Scaler的 ...
开机动画制作及多分辨率适配
1.开机动画制作开机动画资源文件:bootanimation.zip 解压后的文件目录: desc.txt文件内容: 512 416 60 代表的分别是宽,高,帧数:具体为:开机动画的宽度为512个 ...
设置sublime text2/3中默认预览浏览器快捷键的方法
各位前端大神们,大家在用IDE编辑器的时候喜欢用哪些呢?是Dreamweaver.Zend Studio.editplus又或者是sublime text?今天马浩周给大家就要说说设置sublime ...
调用浏览器的打印方法打印页面内容
2018-08-30 直接调用浏览器的打印方法 1.打印按钮 <a href="#" target="_self" οnclick="print ...

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

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

最新文章

热门文章