响应式网页设计

1、概述
网页设计根据设备环境进行相应的响应与调整
优点：对用户友好；后台数据库统一；方便维护
缺点：增加加载时间；开发时间
原理：<meta>标签；使用媒体查询/媒介查询适配对应样式；使用第三方框架(如Bootstrap)
2、关于屏幕适配的常用术语
像素和屏幕分辨率
像素，全称图像元素，是尺寸单位
屏幕分辨率就是屏幕上显示的像素个数，以水平分辨率和垂直分辨率来衡量大小，当屏幕分辨率低时—像素少—尺寸大；当屏幕分辨率高时—像素多—尺寸小
设备像素和CSS像素
设备像素(物理概念)：设备中使用的物理像素——ppi
CSS像素(网页编程的概念)：CSS样式代码中使用的逻辑像素
设备像素和CSS像素的换算是通过设备像素比完成
3、视口
概念
桌面浏览器中的视口：等于浏览器中的窗口，视口中的像素指的是CSS像素，视口大小决定了页面布局的可用宽度，视口的坐标是逻辑坐标与设备无关
移动浏览器中的视口：分为可见视口和布局视口
在移动浏览器中，通过<meta>标签中引入viewport属性来处理可见视口和布局视口的关系
引入代码：<meta name="viewport" content="width=device-width, initial-scale=1.0">
常用属性
viewport属性表示设备屏幕上能用来显示网页的区域
viewport常用属性值：width、height、initial-scale(设定页面初始缩放比例0~10)、user-scalable(设定用户是否可以缩放yes/no)、minimum-scale(最小缩放比0~10)、maximum-scale
媒体查询
媒体查询可根据设备显示器的特性设定CSS样式
步骤：1、<meta>标签中添加viewport属性的代码；
　　    2、使用@media关键字编写CSS媒体查询代码
4、响应式网页的布局设计
常用布局类型
单列布局——适合内容较少的网站布局，一般由顶部Logo和菜单(一行)、中间的内容区域(一行)和底部网站相关信息(一行)共3行组成
均分多列布局——列数>=2列的布局类型，每列宽度相同，列与列间距相同，适合商品/图片的列表展示
不均分多列布局——列数>=2列的布局类型，每列宽度不同，列与列间距不同，适合博客类文章内容页面的布局，一列布局文章内容，一列布局广告链接等内容
布局的实现方式
(按照页面的宽度单位——像素/百分比来划分)
单一式固定布局——以像素作为页面基本单位
技术简单，适配性差
响应式固定布局——以像素作为页面基本单位
通过媒体查询技术识别不同屏幕/浏览器的宽度
实现成本最低，拓展性较差
响应式弹性布局——以百分比作为页面基本单位
可以适应一定范围内所有设备屏幕及浏览器的宽度
响应式网页布局的设计与实现
模块内容不变——通过调整模块的宽度，可以将模块内容从挤压调整到拉伸，从平铺调整到换行
模块内容改变——通过媒体查询，检测当前设备的宽度，动态隐藏/显示模块内容，增加/减少模块数量