css判断不同分辨率显示不同宽度布局实现自适应宽度

转载链接:http://www.jb51.net/css/151312.html


点评CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局

CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化(网页宽度自动随浏览器显示宽度而变宽变窄)。
随着发展,越来越多的电脑用户显示屏分辨率越来越高,但有的用户还是使用1024px的分辨率的显示屏(根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少,但我们CSS布局时仍然需要至少考虑1024px分辨率用户),如果网页布局宽度固定到1200px,1024分辨率用户浏览网页时浏览器下方会出现滚动条,为了解决这个问题,大家可以通过使用CSS3样式判断用户浏览器宽度从而调用不同布局宽度。

使用CSS单词与语法

@media screen and (判断属性){ CSS样式选择器 }
这里注意花括号里装要变化CSS样式选择器。

三、不同分辨率显示不同宽度样式案例

1、DIVCSS小案例描述
我们首先设置一个DIV盒子CSS命名为“.abc”,设置其高度为300px,css边框为黑色;以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。
我们通过手动拖拽浏览器显示宽度,然后观察此盒子宽度变化情况,当浏览器宽度调节到宽度不大于500px时,对应此盒子宽度显示100px;调节浏览器宽度不大于901px时,显示“.abc”对应盒子宽度显示200px;当调节浏览器宽度大于1201px时,盒子对象宽度显示1200px;当小于1200px时候显示宽度为900px。

2、CSS代码

.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: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 
需要注意是CSS代码顺序,由大到小排版CSS(判断浏览器宽度越大越放前),这样是因为逻辑关系,@media 判断CSS排错将导致判断失效。

3、HTML代码

<!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}
}
/* 设置了浏览器宽度不小于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>
</head>
<body>
<div class="abc">DIVCSS5实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度</div>
</body>
</html> 
4、为了兼容IE9以下版本浏览器需要加入一个google的JS,当然可以下载引人html

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]--> 
将JS代码放入</head>标签前即可,这里直接引人google在线JS,你可以下载此JS文件重新HTML引人即可。

5、完美兼容各大浏览器HTML+CSS+JS源代码

<!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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276263.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安卓相机 高帧率_Android MediaCodec和摄像头:如何实现更高的帧速率从相机获取帧原始数据?...

摄像机API有两个不同的参数用于控制帧速率&#xff1a;setPreviewFrameRate,它采用单帧速率值并且不推荐使用,setPreviewFpsRange采用一系列FPS值,是当前推荐的控制.单FPS设置控制不充分的原因是,有时您希望相机在黑暗条件下降低帧速率以使取景器保持明亮(静态相机取景器就是这…

开发、测试与QA的区别以及其他

觉得这个比喻比较新颖&#xff0c;觉得蛮有意思的&#xff0c;故转自过来。 最近部门中有同事在问这个问题&#xff0c;我想应该还是有满多人对这三个角色的定位还不是很清楚&#xff0c;因此就这三个角色谈谈我个人的认识。 网络上关于这三种角色的定义已经够多&#xff0c;在…

CentOS7Jenkins安装

2019独角兽企业重金招聘Python工程师标准>>> CentOS7Jenkins安装 2017年05月07日 20:20:32 申明霜 阅读数&#xff1a;13945 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/sms15732621690/article/details/713…

2020 全球 JS 现状调查报告

大家好&#xff0c;我是若川。偷偷告诉你&#xff0c;今天推文的第二条是在我的公众号回复「网盘」免费领取百度网盘会员&#xff0c;欢迎大家分享转发。给大家分享一篇好文&#xff0c;往期类似好文&#xff1a;2020 前端技术发展回顾2020年大前端技术趋势解读以下是正文&…

ie兼容响应式布局的实现总结 和 针对ie浏览器的CSS

参考链接&#xff1a;http://zhidao.baidu.com/link?urlbQioDKMnG_eQoE6dCxzd2hPtMyiB7phu6hBdOupn1Pjk1hV-ItXFZS5GDUBoH5qrfi9LXkUoSciXTiGN36G6LK 参考链接&#xff1a;http://blog.sina.com.cn/s/blog_601b97ee0101aszo.html ie浏览器hack .demo {padding:10px;padding:9…

group by 保留哪一条数据_使用R语言绘制一维数据统计图总结

加载数据 绘制茎叶图 绘制直方图 绘制概率密度曲线 绘制小提琴图 绘制箱线图 绘制小提琴图箱线图 集中趋势统计 分散程度 apply的使用加载数据模拟数据下载library(tidyverse) cjb <- read.csv("/home/wy/Downloads/cjb.csv",header TRUE,stringsAsFactors FALS…

npm安装和Vue运行

一、开始&#xff1a; 下载地址&#xff1a;http://nodejs.cn/download/ 下载安装&#xff1a; 直到 二、打开CMD,检查是否正常 在安装目录里新增两个文件夹 然后运行命令&#xff1a;如下图&#xff1a; npm config set prefix "D:\InstallSoftWare\nodejs\node_global&q…

Scott 32 岁前端年终总结,探寻另一种可能

今年一年都是飞快 这 10 年编程好时光&#xff0c;花费在不经意间&#xff0c;而立的第三年也即将用完&#xff1a;23 到 26 岁&#xff0c;花在了阿里&#xff0c;从入门到职业迷茫&#xff0c;27 到 29 岁&#xff0c;花在了创业&#xff0c;从热血到倒闭还钱&#xff0c;30 …

跨页数据传递的两种方式

选择具有PostBackUrl属性的三个控件Button、LinkButton、ImageButton。PostBackUrl属性的值就是投递的页面URL。 要在接收页面按对象的方式接收投递页面的表单中的值有两种方式&#xff1a; 1、PreviousPage.FindControl(“控件变量名”)&#xff0c;这个方法返回的是Control类…

linux批量杀进程_Linux下批量杀JAVA进程

在工作中经常需要停止JAVA进程&#xff0c;停止时间也比较长&#xff0c;那么有时候因为一些情况&#xff0c;需要把 linux 下JAVA所有进程kill 掉&#xff0c;又不能用killall 直接杀掉某一进程名称包含的所有运行中进程(我们可能只需要杀掉其中的某一类或运行指定参数命令的进…

用jquery1.9版本判断ie浏览器及ie6浏览器

参考链接&#xff1a;http://www.my0832.com/158182/blog-117887.html jQuery 从 1.9 版开始&#xff0c;移除了 $.browser 和 $.browser.version &#xff0c; 取而代之的是 $.support 。 在更新的 2.0 版本中&#xff0c;将不再支持 IE 6/7/8。 以后&#xff0c;如果用户需要…

嵌入式操作系统 NuttX 5.0 发布

Nuttx 是一个实时嵌入式操作系统&#xff08;RTOS&#xff09;&#xff0c;它有一个小巧是在微控制器的环境中使用。这是完全可扩展&#xff0c;从小型&#xff08;8位&#xff09;至中型嵌入式&#xff08;32位&#xff09;系统。它的目的还 在于要完全符合标准&#xff0c;完…

Windows下Mysql 的安装和卸载

2019独角兽企业重金招聘Python工程师标准>>> 一、安装 1、下载zip文件 2、解压&#xff0c;在bin目录下新建my.ini [mysql] # 设置mysql客户端默认字符集 default-character-setutf8 [mysqld] # 设置3306端口 port3306 # 设置mysql的安装目录 basedirC:\Program Fil…

现在学前端还来得及吗?总听人说饱和了

“前端已经饱和了&#xff0c;现在学前端没有前途了”每次听到这种论调我都气不打一处来。自己技艺不精&#xff0c;然后就说市场饱和了。是&#xff0c;现在的确不是那个会切个图&#xff0c;懂点htmlCSS就能找到工作的年代了。现在对前端的技术要求稍微高了点&#xff0c;但这…

jquery网页刷新后控件失效_jquery动态增减控件如何才能不刷新页面

已结贴√问题点数&#xff1a;20 回复次数&#xff1a;9jquery动态增减控件如何才能不刷新页面用jquery动态管理控件&#xff0c;可是每一次增减控件都会刷新页面&#xff0c;然后控件里面原来输入的值就都不在了&#xff0c;可以怎么来实现在动态增减控件时不刷新页面呢&#…

HTML代码 网页设置 QQ空间等分享

转载链接&#xff1a;http://zhidao.baidu.com/link?urlgpehGR7eSSyilECgVIOuZnDycBUjKABR2VubZAUSRD89qQrNhlCBxHuIUq9mQmvGaQy2RUSw1gAx614JlroXFK 右边&#xff1a; <!-- Baidu Button BEGIN --> <script type"text/javascript" id"bdshare_js&qu…

固定资产减值准备与累计折旧会计核算的关系

转载http://hi.baidu.com/ddumy/blog/item/d96b361901776e7ddab4bdd6.html固定资产减值准备与累计折旧会计核算的关系【摘 要】 固定资产减值准备与累计折旧是固定资产核算的重要组成部分&#xff0c;又都是“固定资产”的备抵项目&#xff0c;它们共同反映着固定资产的现时价值…

DotNetNuke 5 C#版本解读之2--HTTP Modules

在前面文章里说明了DNN的架构&#xff0c;下面这个图应该说是更加能够全面的让你去了解它的结构&#xff1a; 如果你是个asp.net新手建议你看看前面这部分&#xff0c;因为它会向你介绍什么是http module,以及其他的一些概念。我想通过你读这篇文章来明白asp.net的机制&#xf…

用框架的你,可能早已忽略了这些事件API

DOMContentLoaded&#xff0c;load&#xff0c;beforeunload&#xff0c;unloadHTML 页面的生命周期包含三个重要事件&#xff1a;DOMContentLoaded —— 浏览器已完全加载 HTML&#xff0c;并构建了 DOM 树&#xff0c;但像 <img> 和样式表之类的外部资源可能尚未加载完…

调用接口登录禅道_有java调用api登录并验证禅道的实例吗

展开全部本文实例为大家分享了32313133353236313431303231363533e78988e69d8331333363396466JAVA的短信验证码api调用代码&#xff0c;供大家参考&#xff0c;具体内容如下import java.io.BufferedReader;import java.io.DataOutputStream;import java.io.IOException;import j…