前端开发系列2-响应式web设计

自适应图片（Fluid Grids）
响应式布局中一个难点就是图片的自适应问题，根据图片的引用方式的 不同，分为一下两种实现方式： 1、img标签 img {width:auto; max-width: 100%;} 2、背景图片 background-size:cover; backgrond-attachment:fixed; background-position:center; <picture>标签 W3C用于响应式图形的草案，因为它还只是草案， 目前还没有支持的浏览器，期待在不久的未来我们能用上。
HTML5+CSS3响应式WEB设计
目录
背景 概念 优点和缺点 案例展示 响应式实践 相关框架 总结

背景
移动互联网风起云涌 终端设备日新月异，各种分辨率层出不穷 企业资源有限，全兼容不切实际 为每个设备开发一套界面，浪费资源，工 作量巨大

概念

响应式Web设计(Responsive Web Design)
控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width/device-height 为设备的 宽度（单位为缩放为 100% 时的 CSS 的像素）。 target-densitydpi 一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。 下面是 target-densitydpi 属性的 取值范围 device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。 high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。 medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是 默认的target density. low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。 <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
流体布局（Fluid Grids）
［流动布局］的含义是，各个区块的位置都是浮动的，不是固定不变的。 其好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面 元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现
.left{ width:30%; maxwidth:320px;float:left} .right{ width:75%; float:right;}
媒体查询（CSS3 Media Queries）
媒体查询（CSS3 Media Queries）
@media all and (min-width: 960px) { ... } @media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。 (min-width:960px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 960 像 素，则会告诉浏览器只运用下列 CSS。 设备类型(media type): all所有设备 screen 电脑显示器 print打印用纸或打印预览视图 handheld便携设备 tv电视机类型的设备 speech语意和音频盒成器 braille盲人用点字法触觉回馈设备 embossed盲文打印机 projection各种投影设备 tty使用固定密度字母栅格的媒介，比如电传打字机和终端

案例展示

Food Sense
OpenLaw

响应式实践

设计流程


用户研究与设备规格预估 框架原型规划和测试 视觉设计 前端构建 移动优先，内容优先 媒体查询 流体布局 自适应图片

设计原则

实现方式
ViewPort
<meta name="viewport” content=” height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | lowdpi] ”/> width，height
相关框架
1、Bootstrap 2、Fluid 960 Grid 3、Golden Grid System …
总结
响应式设计不仅仅是响应不同类型的设备，而 且需要响应不同的用户需求。 谢谢！！
Ethan Marcotte于2010年5月提出，目的是解决 移动互联网的浏览问题。 简言之，响应式web设计是使用一套代码为各种设 备提供良好设计效果和使用体验的最佳的设计方法。
优点
面对不同分辨率的设备灵活性强 能够快捷的解决多设备显示适应的问题

Байду номын сангаас 缺点
兼容各种神工作量大，效率低 代码累赘，会出现隐藏无用的元素，加载时 间加长，尤其是在移动网络下，统一页面设 计相比专门针对移动设备开发的页面，稍显 不足 一定程度上改变了网站原有的布局结构，会 出现用户混淆的情况
媒体查询（CSS3 Media Queries）
Media Queries常用属性：
width：描述终端设备显示区域的宽度，接受max/min的前缀； height：描述终端设备显示区域的高度，接受max/min的前缀； device-width：描述终端设备屏幕的宽度，接受max/min的前缀； device-height：描述终端设备屏幕的高度，接受max/min的前缀； orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为： landscape/portrait。