编程教程
编程问答 ACM与蓝桥杯竞赛入门 C语言教程 C++教程 数据结构教程 单片机教程 Python教程 JAVA教程 编译器教程 C语言函数库 更多教程CSS响应式布局（自适应布局）
什么是响应式布局？
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。EthanMarcotte在2010年5月份提出了响应式布局的概念，简而言之，就是一个网站能够兼容多个终端。
| 开发方式 | 移动web开发+PC开发 | 响应式开发 |
| 应用场景 | 一般在已经有PC端的网站，开发移动站的时候，只需单独开发移动端。 | 针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活。 |
| 开发 | 针对性强，开发效率高 | 兼容各种终端，效率低 |
| 适配 | 只适配 移动设备，pad上体验相对较差 | 可以适配各种终端 |
| 效率 | 代码简洁，加载快 | 代码相对复杂，加载慢 |
响应式开发与移动端与PC端分别开发的区别：响应式开发只编写一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。移动端与PC端分别开发，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机， 从而请求服务器，返回不同的页面。
响应式开发的原理？
响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。
SS3 @media 查询定义和使用：
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
例如屏幕宽度小于 500 像素则修改背景颜色(background-color)为红色。
要实现响应式布局，常用的方式有以下几种：
（1）使用 CSS 中的媒体查询（最简单）；
（2）使用 JavaScript（使用成本比较高）；
（3）使用第三方开源框架（例如 bootstrap，可以很好的支持各种浏览器）。
设置 meta 标签
首先，我们需要设置 meta 标签来告诉浏览器，让视口（网页的可视区域）的宽度等于设备的宽度，并禁止用户对页面的缩放，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
在设置视口时需要注意，视口就是网页可见区域的尺寸，设置视口时只设置宽度就行，不用在乎高度，具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下：
● viewport：即视口，表示网页的可视区域；
● width：控制 viewport 的大小，可以指定一个具体的值，例如 600，也可以是由关键字组成的特殊值，例如 device-width 就表示设备的宽度；
● initial-scale：表示初始缩放比例，也就是页面第一次加载时的缩放比例；
● maximum-scale：表示允许用户缩放的最大比例，范围从 0 到 10.0；
● minimum-scale：表示允许用户缩放到最小比例，范围从 0 到 10.0；
● user-scalable：表示用户是否可以手动缩放，“yes”表示允许缩放，“no”表示禁止缩放。
媒体查询
CSS 媒体查询可以根据指定的条件，针对不同的媒体类型（screen print）定义不同的 CSS 样式，让使用不同设备的用户都能得到最佳的体验。
用HTML举例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>响应式页面入门教程：Albert Yang</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <header> <a href="#">AlbertYang</a> <ul> <li><a href="#">首页</a></li> <li><a href="#">博客</a></li> <li><a href="#">联系我</a></li> <li><a href="#">留言板</a></li> <li><a href="#">关于我</a></li> <li><a href="#">照片墙</a></li> </ul> <div> <input type="text" placeholder="Search"> <i class="fa fa-search" aria-hidden="true"></i> </div> </header> <div> <div> <h2>响应式布局</h2> <p> 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。 传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。 响应式设计与自适应设计的区别：响应式开发一套界面， 通过检测视口分辨率，针对不同客户端在客户端做代码处理， 来展现不同的布局和内容；自适应需要开发多套界面， 通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机， 从而请求服务层，返回不同的页面。CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式， 当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 </p> <a href="#">阅读全文</a> </div> <img src="img.png"> </div> </body> </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" />
<style>
*{
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
}
#head, #foot, #main
{
height: 100px;
width: 1200px;
/*width: 85%;*/
background-color: goldenrod;
text-align: center;
font-size: 48px;
line-height: 100px;
margin: 0 auto;
}
#head div{
display: none;
font-size: 20px;
height: 30px;
width: 100px;
background-color: green;
float: right;
line-height: 30px;
margin-top: 35px;
}
#head ul{
width: 80%;
}
#head ul li{
width: 20%;
float: left;
text-align: center;
list-style: none;font-size: 20px;
}
#main{
height: auto;
margin: 10px auto;
overflow: hidden;
}
.left, .center, .right{
height: 600px;
line-height: 600px;
float: left;
width: 20%;
background-color: red
}
.center{
width: 60%;
border-left: 10px solid #FFF;
border-right: 10px solid #FFF;
box-sizing: border-box;
}
@media only screen and (max-width: 1200px) {
#head, #foot, #main{
width: 100%;
}
}
@media only screen and (max-width: 980px) {
.right{
display: none;
}
.left{
width: 30%;
}
.center{
width: 70%;
border-right: hidden;
}
}
@media only screen and (max-width: 640px) {
.left, .center, .right{
width: 100%;
display: block;
height: 200px;
line-height: 200px;
}
.center{
border: hidden;
border-top: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
height: 600px;
line-height: 600px;
}
#head ul{
display: none;
}
#head div{
display: block;
}
}
</style>
</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>运行结果：
本文固定URL： https://www.dotcpp.com/course/1175
CSS调节元素大小（resize）
C语言网推出会员服务，提供C/C++/算法/Python等多套视频学练课程+源码资源社群答疑+私活推荐等资源，享受丰富的技术学习到变现的乐趣，以含金量和学习效果勇敢挑战同类辅导！ 点击了解开通
其他教程
Java字符串的替换与分解
堆排序算法实例详解
数学基础
虚拟机下载和安装图文教程
反演变换的性质
循环队列的基本操作及C语言代码实现
Python循环嵌套
C语言atan()函数:求正切值为 x 的弧度数
LNMP环境下搭建帝国cms
引入MCI头文件和静态库
try…catch…finally语句里return语句的执行顺序是怎样的？
如果Throwable是一个接口，那么异常处理会不会更容易？
新手适不适合看C Prime Plus
Linux文件目录结构
编程命名规范之驼峰式命名法
C语言如何生成指定范围内的随机数
原码与源码的区别
C语言培训要不要参加？哪里参加？
什么是函数指针
补码如何应用？