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

HTML5+CSS3响应式WEB设计目录背景概念优点和缺点案例展示响应式实践相关框架总结背景移动互联网风起云涌终端设备日新月异，各种分辨率层出不穷企业资源有限，全兼容不切实际为每个设备开发一套界面，浪费资源，工作量巨大概念响应式Web设计(ResponsiveWebDesign)EthanMarcotte于2010年5月提出，目的是解决移动互联网的浏览问题。简言之，响应式web设计是使用一套代码为各种设备提供良好设计效果和使用体验的最佳的设计方法。优点面对不同分辨率的设备灵活性强能够快捷的解决多设备显示适应的问题缺点兼容各种神工作量大，效率低代码累赘，会出现隐藏无用的元素，加载时间加长，尤其是在移动网络下，统一页面设计相比专门针对移动设备开发的页面，稍显不足一定程度上改变了网站原有的布局结构，会出现用户混淆的情况案例展示FoodSenseOpenLaw响应式实践设计流程用户研究与设备规格预估框架原型规划和测试视觉设计前端构建设计原则移动优先，内容优先实现方式媒体查询流体布局自适应图片ViewPortmetaname=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|low-dpi]”/width，height控制viewport的大小，可以指定的一个值或者特殊的值，如device-width/device-height为设备的宽度（单位为缩放为100%时的CSS的像素）。target-densitydpi一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。下面是target-densitydpi属性的取值范围device-dpi–使用设备原本的dpi作为目标dp。不会发生默认缩放。high-dpi–使用hdpi作为目标dpi。中等像素密度和低像素密度设备相应缩小。medium-dpi–使用mdpi作为目标dpi。高像素密度设备相应放大，像素密度设备相应缩小。这是默认的targetdensity.low-dpi-使用mdpi作为目标dpi。中等像素密度和高像素密度设备相应放大。value–指定一个具体的dpi值作为targetdpi.这个值的范围必须在70–400之间。媒体查询（CSS3MediaQueries）媒体查询（CSS3MediaQueries）@mediaalland(min-width:960px){...}@mediaall是媒体类型，也就是说，将此CSS应用于所有媒体类型。(min-width:960px)是包含媒体查询的表达式，如果浏览器的最小宽度为960像素，则会告诉浏览器只运用下列CSS。设备类型(mediatype):all所有设备screen电脑显示器print打印用纸或打印预览视图handheld便携设备tv电视机类型的设备speech语意和音频盒成器braille盲人用点字法触觉回馈设备embossed盲文打印机projection各种投影设备tty使用固定密度字母栅格的媒介，比如电传打字机和终端媒体查询（CSS3MediaQueries）MediaQueries常用属性：width：描述终端设备显示区域的宽度，接受max/min的前缀；height：描述终端设备显示区域的高度，接受max/min的前缀；device-width：描述终端设备屏幕的宽度，接受max/min的前缀；device-height：描述终端设备屏幕的高度，接受max/min的前缀；orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为：landscape/portrait。流体布局（FluidGrids）［流动布局］的含义是，各个区块的位置都是浮动的，不是固定不变的。其好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现.left{width:30%;max-width:320px;float:left}.right{width:75%;float:right;}自适应图片（FluidGrids）响应式布局中一个难点就是图片的自适应问题，根据图片的引用方式的不同，分为一下两种实现方式：1、img标签2、背景图片img{width:auto;max-width:100%;}background-size:cover;backgrond-attachment:fixed;background-position:center;picture标签W3C用于响应式图形的草案，因为它还只是草案，目前还没有支持的浏览器，期待在不久的未来我们能用上。相关框架1、Bootstrap2、Fluid960Grid3、GoldenGridSystem…总结响应式设计不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。谢谢！！