响应式布局

网页布局

网页布局有很多种方式，一般分为以下几个部分、头部区域、菜单导航区域、内容区域、底部区域。如下图：

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的logo。菜单导航区域包含了一些超链接，可以引导用户点击浏览其它页面。
内容区域分为三种形式：
1、1列：一般用于移动端；
2、2列：一般用于平板设备；
3、3列：一般用于pc端。
底部区域在网页的最下方，一般是包含版权信息和联系方式等。

响应式布局的提出最初是从一个设备一套代码的开发模式转变为改进移动互联网浏览器体验而提出的概念，一套代码智能的根据用户行为以及设备的环境（系统平台，屏幕尺寸，屏幕特点）自动的修改布局，但是响应式布局并不是万能的，一些结构稍微复杂的页面以及考虑设备较多的网页就不合适，响应式布局适合开发：官网、服务型网站，这些网站不是很复杂。测试响应式页面一般有三种方法：
1.浏览器提供的模拟器测试
2.真机调试(效果最好)
3.第三方模拟器测试软件(测试效果有待验证)

写响应式布局页面时，有三点需要注意：

1.页面布局最好采用液态(流式)布局
容器的尺寸 ： 用百分比或者auto代替具体的值
文字大小： em rem 代替 px 手机默认字体 10px pct:14px 网站:12px
em相对父元素
rem相对于根元素（相对长度单位）
max-width
min-width

2.响应式网页必须 css media Query 技术 ：根据网页浏览器设计类别不同或者特征不同。而选择执行某些css样式，舍弃掉执行某些css样式
media : print screen TV tty braille盲文
Query ： 使用css自动查询浏览器的设备特征

3.快速搭建响应式布局的框架 bootstrap

第三个将在下一篇博客中介绍，bootstrap这个框架的亮点应该就是栅格系统了，这里就不多叙述了。

接下来我们一起来看看究竟要如何写，代码如下（仅供参考）：

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}