《陈本峰：多屏时代的网页开发技术.pdf》由会员分享，可在线阅读，更多相关《陈本峰：多屏时代的网页开发技术.pdf（40页珍藏版）》请在三一文库上搜索。
1、多屏时代的网页开发技术 陈本峰 20138 云适配创始人CEO W3C中国区HTML5布道官 前微软美国总部IE浏览器 核心研发团队 网页跨屏适配云平台 8, 9, 10 关于我 WWW 过去 WEB WWW 现在 WWW 未来 手机网民：4.64 亿 PC电脑网民：3.83 亿 手机已是第一大上网设备 移动网站 显示：适合手机屏幕阅读，无需缩放 导航：适合手指操作，简洁导航 性能：在低带宽下仍可以快速载入 功能：有效利用手机特性 (GPS、电话、短信 ) 什么是移动网站？仁仁在手机上显示 移动网站 移动网站是为最佳的移动浏览体验定制的网站 营销作用 移动网站助您在竞争中胜出丌适合移动浏览的网
2、站会直接导致用户流失 数据来源: 谷歌, 2012 “适合移动浏览的网站是我更可 能选择一个产品或服务。” “若在短时间内看不到我找的内容， 我会迅速选择其他服务。” 品牉作用 移动网站助您建立良好的品牉形象丌佳的移动网站会损害您的品牉形象 “我会因为不佳的移动浏览体验而对一个 我喜欢的公司或品牌感到失望。” “不流畅的移动网站体验会损坏我 对此品牌的整体印象。” “较差的移动体验使我不愿选择该 品牌的产品或服务。” 数据来源: 谷歌, 2012 多屏时代Web开发的挑战 适配 Android 手机机型市场分布三星Galaxy系列屏幕尺寸图 网页跨屏适配开发方案 针对丌同设备分别开发丌同版本
3、(, ) 响应式设计 云适配 针对丌同设备分别开发丌同版本 实现方式：独立编写前端/后端代码 优势 内容完全可定制 页面流量可最优化 可兼容非HTML5浏览器 挑战 开发成本很高 数据同步困难 跨屏扩展困难 多个网址，推广成本高 响应式设计 响应式设计 历叱 Responsive Web Design by ETHAN MARCOTTE May 25, 2010 http:/ Responsive Web Design（2011出版） Media Queries 基本用法 /* 手机屏幕 */ /* 平板电脑屏幕 */ /* 电脑屏幕 */ Media Queries 代码实例 http:/
4、/* max-width */ media screen and (max-width: 600px) .one background: #F9C; span.lt600 display: inline-block; /* min-width */ media screen and (min-width: 900px) .two background: #F90; span.gt900 display: inline-block; /* min-width span.bt600-900 display: inline-block; /* max device width */ media sc
5、reen and (max-device-width: 480px) .iphone background: #ccc; Media Queries 进阶用法 /* 横屏 */ /* 电视 */ /* 屏幕尺寸比率 */ /* 设备宽度(而不是浏览器窗口宽度) */ Media Queries 查询条件 值对应设备 all所有设备 braille 布莱叶盲点输入设备 embossed 布莱叶打印机 handheld手持设备 print打印设备 projection投影设备 screen显示屏幕 speech语音输出 tv电视 设备查询参数查询 值对应设备 width/height窗口宽度/高度
6、 device-width/device-height设备宽度/高度 orientation屏幕方向(横屏/竖屏) aspect-ratio窗口横竖尺寸比率 device-aspect-ratio设备横竖尺寸比率 color颜色深度 color-index颜色种类数量 resolution分辨率 grid设备是丌是基于网格 Media Queries 查询工具 http:/ 利用Grid 框架来做布局 http:/ 响应式图片 img max-width: 100%; height: auto; width: auto9; /* ie8 */ 响应式文字 http:/ Media Querie
7、s 兼容问题 css3-mediaqueries.js respond.js （轻量级css3-mediaqueries.js ） https:/ adapt.js （不使用Media Queries语法） http:/adapt.960.gs/ var ADAPT_CONFIG = / Where is your CSS? path: assets/css/, / false = Only run once, when page first loads. / true = Change on window resize and page tilt. dynamic: true, / Opti
8、onal callback. myCallback(i, width) callback: myCallback, / First range entry is the minimum. / Last range entry is the maximum. / Separate ranges by “to“ keyword. range: 0px to 760px = mobile.css, 760px to 980px = 720.css, 980px to 1280px = 960.css, 1280px to 1600px = 1200.css, 1600px to 1920px = 1
9、560.css, 1940px to 2540px = 1920.css, 2540px = 2520.css ; 响应式设计 - 示例 手机平板电脑 响应式设计 - 示例 手机平板 电脑 响应式设计 - 示例大全 http:/mediaqueri.es/ 响应式设计 实现方式：用CSS3的media queries 加载丌同的样式 优势 同一网址，方便推广 内容实时自动同步 跨屏扩展容易 挑战 开发成本较高 对设备类型区分丌大（如平板/PC） 页面流量很大 内容定制能力有限 云适配 - 一行代码将您网站移动化 内容实时自动同步 网址保持丌变 触控操作友好 速度优化 使用云适配后原PC网站 云
10、适配技术方案 原PC网页 引用 根据设备屏幕宽度， 动态修改DOM和CSS 云适配 实现方式：在原网页中加入一行云适配JS代码，动态修改DOM 优势 同一网址，方便推广 开发成本低 内容实时自动同步 内容可定制 跨屏扩展方便 挑战 页面流量中等 只适用HTML5浏览器 云适配愿景 One Web，Any Device WEB 单屏时代WEB多屏时代WEB 云适配客户案例企业官网 微软亚太集团联想浪潮 云适配客户案例电商 RoseOnly玫瑰电商 好利来蛋糕中国人保 云适配客户案例媒体 创业邦CSDN汽车博览 云适配客户案例创投 IDG资本 真格基金经纬创投 云适配客户案例机构 微软云加速器HTML5梦工厂国际互联网标准 联盟W3C 云适配客户案例高校 中国科技大学西北政法大学 云适配客户案例政府 中关村政府美国Bellevue市政府西安交警 陈本峰 | 13952800186 | 陈本峰 一行代码，帮您抓住4亿手机网民 HTML5、 Node.js 攻城师火热招募中！