响应式web设计概要1.pptx

响应式web布局设计;定义：web页面根据设备环境和用户行为进行相应的相应和调整。 核心方法：响应式布局，媒介查询，自适应媒体资源。 思想：渐进增强 or 优雅降级。 ;布局：固定布局，流动布局，弹性布局，表格布局，混合布局等。 单位：px，em，百分比，rem等。 body{font-size:100%;} 最佳方案：流动布局为最佳选择，百分比和em为最佳单位。;定义：利用特定的属性值来决定使用什么样的样式。 属性值：设备分辨率，色彩深度，高度，宽度，横屏或竖屏等。 ;1、为你的站点设定视口 布局视口，视觉视口 meta name=“viewport” content=“width=device-width,user-scalable=no,initial-scale=1” / 视口属性：width,height,user-scalable,initial-scale,maximum-scale,minimum-scale等。 @viewport规则引用 ;2、使用媒介查询 @media [not/only] type [and] (expr){rules} link href=“style.css” rel=“stylesheet” media=“only type and (expr)” / type: all,print,projection,screen等 常用的媒介特性：width,height,min,max,orientation(portrait|landscape),resolution,aspect-ratio等。 ;3、媒介查询的顺序 桌面端向下设计 移动端向上设计 @media all and (min-width:50em){….} 优先创建核心体验 ;4、设置断点 根据内容判断断点 使用em可增加灵活性 IE低版本可使用条件注释 ;有条件的加载多媒体资源 利用JS判断是否加载，是否原图显示 img{max-width:100%;} ;原因—过度下载： 下载并隐藏 下载并缩小 额外的DOM 方法： 使用响应式图片 优先为移动平台创建 测量 ;1、利用媒介查询判断ipad设备 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {….} 2、判断retina屏幕 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2){…};RWD是前后端统一，后端来输出不同的内容，前端来按需加载资源。 RWD灵感来源：http://mediaqueri.es/?RWD设计模式：/this-is-responsive/patterns.html?RWD开发浏览器窗口调整工具：/?RWD Weekly：/