CSS 判断不同分辨率显示不同宽度布局实现自适应宽度
CSS p 网页布局中当分辨率小于等于 1024px(像素) 时, p 布局对象显示 1000px 宽度, 当分辨率大于 1024px 时候显示 1200px 宽度等需求. 使用 CSS 实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化 (网页宽度自动随浏览器显示宽度而变宽变窄).
随着发展, 越来越多的电脑用户显示屏分辨率越来越高, 但有的用户还是使用 1024px 的分辨率的显示屏 (根据几个浏览器分辨率统计平台得到数据现在使用 1200 分辨率以下用户极少, 但我们 CSS 布局时仍然需要至少考虑 1024px 分辨率用户), 如果网页布局宽度固定到 1200px,1024 分辨率用户浏览网页时浏览器下方会出现滚动条, 为了解决这个问题, 大家可以通过使用 CSS3 样式判断用户浏览器宽度从而调用不同布局宽度.
使用 CSS 单词与语法
代码如下:
@media screen and (判断属性){ CSS 样式选择器 }
这里注意花括号里装要变化 CSS 样式选择器.
不同分辨率显示不同宽度样式案例
pCSS 小案例描述
我们首先设置一个 p 盒子 CSS 命名为 ".abc", 设置其高度为 300px,css 边框为黑色; 以及设置 margin:0 auto 布局居中. 预先设置这两个样式是为了便于观察.
我们通过手动拖拽浏览器显示宽度, 然后观察此盒子宽度变化情况, 当浏览器宽度调节到宽度不大于 500px 时, 对应此盒子宽度显示 100px; 调节浏览器宽度不大于 901px 时, 显示 ".abc" 对应盒子宽度显示 200px; 当调节浏览器宽度大于 1201px 时, 盒子对象宽度显示 1200px; 当小于 1200px 时候显示宽度为 900px.
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 排错将导致判断失效.
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>
- <p class="abc">pCSS5 实例: 我这个 p 宽度会随浏览器宽度变化哦, 试试改变浏览器宽度 </p>
- </body>
- </html>
为了兼容 IE9 以下版本浏览器需要加入一个 google 的 JS, 当然可以下载引人 html
代码如下:
<!--[if lt IE 9]>
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
将 JS 代码放入标签前即可, 这里直接引人 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="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
- <![endif]-->
- </head>
- <body>
- <p class="abc">pCSS5 实例: 我这个 p 宽度会随浏览器宽度变化哦, 试试改变浏览器宽度 </p>
- </body>
- </html>
来源: https://www.2cto.com/kf/201804/738053.html