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

《前端开发系列2-响应式web设计.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、设备显示适应的问题缺点兼容各种神工作量大，效率低代码累赘，会出现隐藏无用的元素，加载时间加长，尤其是在移动网络下，统一页面设计相比专门针对移动设备开发的页面，稍显不足一定程度上改变了网站原有的布局结构，会出现用户混淆的情况案例展示FoodSenseOpenLaw响应式实践设计流程用户研究与设备规格预估框架原型规划和测试视觉设计前端构建设计原则移动优先，内容优先实现方式媒体查询流体布局自适应图片ViewPort

3、

4、device-height],width=[pixel_value

5、device-width],initial-scale = float_value ,minimum-scale = float_value ,maximum-scale = float_value ,user-scalable=[yes

6、no],target-densitydpi=[dpi_value

7、device-dpi

8、high-dpi

9、medium-dpi

10、low-dpi] ”/>width，height控制viewport的大小，

11、可以指定的一个值或者特殊的值，如device-width/device-height为设备的宽度（单位为缩放为100%时的CSS的像素）。target-densitydpi一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。下面是target-densitydpi属性的取值范围device-dpi–使用设备原本的dpi作为目标dp。不会发生默认缩放。high-dpi–使用hdpi作为目标dpi。中等像素密度和低像素密度设备相应缩小。medium-dpi–使用mdpi作为目标dpi。高像

12、素密度设备相应放大，像素密度设备相应缩小。这是默认的targetdensity.low-dpi-使用mdpi作为目标dpi。中等像素密度和高像素密度设备相应放大。–指定一个具体的dpi值作为targetdpi.这个值的范围必须在70–400之间。媒体查询（CSS3MediaQueries）媒体查询（CSS3MediaQueries）@mediaalland(min-width:960px){...}@mediaall是媒体类型，也就是说，将此CSS应用于所有媒体类型。(min-width:96

13、0px)是包含媒体查询的表达式，如果浏览器的最小宽度为960像素，则会告诉浏览器只运用下列CSS。设备类型(mediatype):all所有设备screen电脑显示器print打印用纸或打印预览视图handheld便携设备tv电视机类型的设备speech语意和音频盒成器braille盲人用点字法触觉回馈设备embossed盲文打印机projection各种投影设备tty使用固定密度字母栅格的媒介，比如电传打字机和终端媒体查询（CSS3MediaQueries）MediaQueries常用属性：width：描

14、述终端设备显示区域的宽度，接受max/min的前缀；height：描述终端设备显示区域的高度，接受max/min的前缀；device-width：描述终端设备屏幕的宽度，接受max/min的前缀；device-height：描述终端设备屏幕的高度，接受max/min的前缀；orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为：landscape/portrait。流体布局（FluidGrids）［流动布局］的含义是，各个区块的位置都是浮动的，不是固定不变的。其好处是，如果宽度太小，放不下两

15、个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现.left{ width:30%; max-width:320px;float:left}.right{ width:75%; float:right;}自适应图片（FluidGrids）响应式布局中一个难点就是图片的自适应问题，根据图片的引用方式的不同，分为一下两种实现方式：1、img标签2、背景图片im