响应式布局

响应式布局

介绍

• 响应式布局是 Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
• 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
• Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式布局的优点和缺点

优点

• 面对不同分辨率设备灵活性强
• 能够快捷解决多设备显示适应问题

缺点

• 兼容各种设备工作量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间加长
• 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
• 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

弹性布局

1、浮动 + 百分比

.box {width: 100%;  border: 1px solid #000000;  padding: 10px;  }
aside {width: 30%; float: left;  background: red; padding: 10px; }
article { width: 65%;  float: left;  margin-left: 10px;  background: yellow; }

2、Flex 布局

Flex布局是在CSS3中引入的，被叫做“弹性盒模型”；该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。

Flex布局功能

• 在屏幕和浏览器窗口大小发生改变时，可以灵活的调整布局
• 控制元素在页面的布局方向
• 按照不同于DOM所指定排序方式对屏幕上的元素重新排序

Flex布局的优势

• 可以让盒子里面的元素排在一行
• 盒子里面的元素是高度相同

语法：

  display: flex; 

修改第一中方法：

.box {  display: flex;  border: 1px solid #000000;  }
aside { background: red;   padding: 10px;  }
article {  margin-left: 10px;   background: yellow;  }

常用属性:

属性	说明
flex	伸缩性
flex-direction	伸缩流方向
flex-wrap	伸缩换行
justify-content	主轴对齐
align-items	侧轴对齐

---

响应式布局的实现方式及应用

响应式网页设计（RWD，Responsive Web Design）由伊桑·马科特（Ethan Marcotte）提出，将三种已有的开发技术整合起来，并命名为响应式网页设计。

• 弹性布局
• 弹性图片
• 媒体和媒体查询

媒体查询

使用媒体查询，先来学习一下三个属性：媒体类型、媒体特性和关键字。

1、媒体类型

值	设备类型
All	所有设备
Braille	盲人用点字法触觉回馈设备
Embossed	盲人打印机
Handheld	便携设备
Print	打印用纸或打印预览视图
Projection	各种投影设备
Screen	电脑显示器
Speech	语音或音频合成器
Tv	电视机类型设备
Tty	使用固定密度字母栅格的媒介，比如电传打字机和终端

常用的两种引入方式：

• 以@media开头来表示这是一条媒体查询语句。

@media 媒体类型 {
        选择器{ /*样式代码写在这里…*/}
}

• 或针对不同 stylesheets :

<link  rel="stylesheet"  href="style1.css"  media="媒体类型" />

2、媒体特性

属 性	值	Min/Max	描 述
device-width	Length	Yes	设置屏幕的输出宽度
device-height	Length	Yes	设置屏幕的输出高度
width	Length	Yes	渲染界面的宽度
height	Length	Yes	渲染界面的高度
Orientation	Portrait/landscape	No	横屏或竖屏
Resolution	分辨率（dpi/dpcm）	Yes	分辨率
Color	整数	Yes	每种色彩的字节数
color-index	整数	Yes	色彩表中的色彩数

3、关键字

1. and：同时满足这两者时生效，到达限定范围

@media screen and （max-width：1200px）{样式代码…}

2. only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

<link   href = "style1.css"  media = " only screen and  (max-width：500px) "  />

3. not：排除某种指定的媒体类型，即排除符合表达式的设备

@media  not  print  and （max-width：1200px）{样式代码…}