CSS 可以使用 @media 查询来实现响应式布局, 使用 @media 查询, 你可以针对不同的媒体类型定义不同的样式.
@media 可以针对不同的屏幕尺寸设置不同的样式, 特别是如果你需要设置设计响应式的页面,@media 是非常有用的.
当你重置浏览器大小的过程中, 页面也会根据浏览器的宽度和高度重新渲染页面.
使用 @media 的三种方式
第一: 直接在 CSS 文件中使用
@media 类型 and (条件 1) and (条件二)
{
CSS 样式
- }
- @media screen and (max-width:980px ) {
- body{
- background-color: red;
- }
- }
第二: 使用 @import 导入
@import url("css/moxie.css") all and (max-width:980px);
第三, 也是最常用的: 使用 link 连接, media 属性用于设置查询方式
<link rel="stylesheet" type="text/css" href="css/moxie.css" media="all and (max-width=980px)"/>
我们只需用到 width 衍生出的 max-width 这个属性, 定义输出设备中的页面可见区域宽度来控制该改变的样式即可.
示例:
html 代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 响应式布局
- </title>
- <meta name="viewport" content="width=device-width,initial-scale=1.0,
- maximum-scale=1,user-scalable=no" />
- <meta name="format-detection" content="telephone=no,email=no" />
- <link rel="stylesheet" type="text/css" href="css/mo2.css" />
- </head>
- <body>
- <div>
- <header id="head">
- <ul>
- <li>
- header1
- </li>
- <li>
- header2
- </li>
- <li>
- header2
- </li>
- <li>
- header2
- </li>
- <li>
- header2
- </li>
- </ul>
- <div>
- icon
- </div>
- </header>
- <section id="main">
- <div class="left">
- left
- </div>
- <div class="center">
- center
- </div>
- <div class="right">
- right
- </div>
- </section>
- <footer id="foot">
- footer
- </footer>
- </div>
- </body>
- </HTML>
CSS 代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 响应式布局
- </title>
- <meta name="viewport" content="width=device-width,initial-scale=1.0,
- maximum-scale=1,user-scalable=no" />
- <meta name="format-detection" content="telephone=no,email=no" />
- <link rel="stylesheet" type="text/css" href="css/mo2.css" />
- </head>
- <body>
- <div>
- <header id="head">
- <ul>
- <li>
- header1
- </li>
- <li>
- header2
- </li>
- <li>
- header2
- </li>
- <li>
- header2
- </li>
- <li>
- header2
- </li>
- </ul>
- <div>
- icon
- </div>
- </header>
- <section id="main">
- <div class="left">
- left
- </div>
- <div class="center">
- center
- </div>
- <div class="right">
- right
- </div>
- </section>
- <footer id="foot">
- footer
- </footer>
- </div>
- </body>
- </HTML>
效果:
窗口大于 1200px 时显示的样子
窗口小于 1200 大于 980 时, 只会被压缩, 并不会发生其他变化
当大于 640 小于 980 时, 右侧栏隐藏
当小于 640 时, 导航栏折叠, body 三部分竖直排列显示, 若窗口持续缩小, 不在发生变化, 区域被压缩
来源: http://www.css88.com/qa/css3/12384.html