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

1、前端开发系列,HTML5+CSS3响应式WEB设计,目录,背景 概念 优点和缺点 案例展示 响应式实践 相关框架 总结,背景,移动互联网风起云涌 终端设备日新月异，各种分辨率层出不穷 企业资源有限，全兼容不切实际 为每个设备开发一套界面，浪费资源，工作量巨大,概念,响应式Web设计(Responsive Web Design) Ethan Marcotte于2010年5月提出，目的是解决移动互联网的浏览问题。 简言之，响应式web设计是使用一套代码为各种设备提供良好设计效果和使用体验的最佳的设计方法。,优点,面对不同分辨率的设备灵活性强 能够快捷的解决多设备显示适应的问题,缺点,兼容各种神工作

2、量大，效率低 代码累赘，会出现隐藏无用的元素，加载时间加长，尤其是在移动网络下，统一页面设计相比专门针对移动设备开发的页面，稍显不足 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况,案例展示,Food Sense OpenLaw,响应式实践,设计流程 用户研究与设备规格预估 框架原型规划和测试 视觉设计 前端构建 设计原则 移动优先，内容优先 实现方式 媒体查询 流体布局 自适应图片,ViewPort,width，height 控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width/device-height 为设备的宽度（单位为缩放为 100%

3、时的 CSS 的像素）。 target-densitydpi 一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。 下面是 target-densitydpi 属性的 取值范围 device-dpi 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。 high-dpi 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。 medium-dpi 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density. low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相

4、应放大。 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70400之间。,媒体查询（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打印用纸或打印预览视图 han

5、dheld便携设备 tv电视机类型的设备 speech语意和音频盒成器 braille盲人用点字法触觉回馈设备 embossed盲文打印机 projection各种投影设备 tty使用固定密度字母栅格的媒介，比如电传打字机和终端,媒体查询（CSS3 Media Queries）,Media Queries常用属性： width：描述终端设备显示区域的宽度，接受max/min的前缀； height：描述终端设备显示区域的高度，接受max/min的前缀； device-width：描述终端设备屏幕的宽度，接受max/min的前缀； device-height：描述终端设备屏幕的高度，接受max/m

6、in的前缀； orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为：landscape/portrait。,流体布局（Fluid Grids）,流动布局的含义是，各个区块的位置都是浮动的，不是固定不变的。 其好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现,.left width:30%; max-width:320px;float:left .right width:75%; float:right;,自适应图片（Fluid Grids）,响应式布局中一个难点就是图片的自适应问题，根据图片的引用方式的不同，分为一下两种实现方式： 1、img标签 2、背景图片,img width:auto; max-width: 100%;,background-size:cover; backgrond-attachment:fixed; background-position:center;,标签 W3C用于响应式图形的草案，因为它还只是草案，目前还没有支持的浏览器，期待在不久的未