CSS 如何根据不同分辨率显示不同宽度布局? 下面本篇文章给大家介绍一下 CSS 判断不同分辨率显示不同宽度布局实现自适应宽度的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
CSS 判断不同分辨率显示不同宽度布局实现自适应宽度
CSS DIV 网页布局中当分辨率小于等于 1024px(像素) 时, DIV 布局对象显示 1000px 宽度, 当分辨率大于 1024px 时候显示 1200px 宽度等需求. 使用 CSS 实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化 (网页宽度自动随浏览器显示宽度而变宽变窄).
实现代码如下:
@media screen and (判断属性){ CSS 样式 }
这里注意花括号里装要变化 CSS 样式选择器.
使用 @media 查询, 你可以针对不同的媒体类型定义不同的样式.
@media 可以针对不同的屏幕尺寸设置不同的样式, 特别是如果你需要设置设计响应式的页面,@media 是非常有用的.
当你重置浏览器大小的过程中, 页面也会根据浏览器的宽度和高度重新渲染页面.
不同分辨率显示不同宽度样式案例
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, 兼容各大浏览器 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} } @media screen and (max-width:
- 1200px) { .abc {width: 900px} } @media screen and (max-width: 900px) {
- .abc {width: 200px;} } @media screen and (max-width: 500px) { .abc {width:
- 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">
- DIV 宽度会随浏览器宽度变化哦, 改变浏览器宽度
- </div>
- </body>
- </HTML>
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/18186.html