响应式web设计电子书|响应式Web设计(HTML5和CSS3实战)pdf高清完整版【无水印】-东坡下载
东坡下载：内容最丰富最安全的下载站！
→ 响应式Web设计(HTML5和CSS3实战) pdf高清完整版【无水印】
关于响应式Web设计：HTML5和CSS3实战这本书，小编看到不少读者这样评价――前半部分讲解responsive design，后面都是一些对html5、css3功能的罗列，没总结学习过的同学可以读一下，实际5~8章是可以略过，直接跳到最后一章吧！――其实不用这么绝对嘛！因为还有另外一拨读者表示――前半段介绍RWD得蛮好的，后面有点凑了，讲CSS3和HTML5新特性，比较离谱的还分析HTML5 表单的新属性。――好了，言归正传，本节内容东坡小编为大家整理带来的是一份pdf格式高清完整版无水印响应式web设计电子书，以下是相关介绍，希望对大家有所帮助！响应式web设计电子书目录第1章 　HTML5、CSS3及响应式设计入门　　11.1 　为什么智能手机很重要（而老版的IE不再重要）　　21.2 　响应式设计一定是最佳选择吗　　31.3 　响应式网页设计的定义　　31.4 　为什么要在响应式设计上停滞不前　　41.5 　响应式网页设计示例　　41.5.1 　下载视口调试工具　　41.5.2 　在线创意源泉　　111.6 　为什么HTML5很优秀　　121.6.1 　省时省力　　121.6.2 　新增了语义化标签元素　　131.7 　CSS3为响应式设计和更多创新奠定了基础　　131.7.1 　底线：CSS3不破坏任何东西　　141.7.2 　CSS3如何解决日常设计问题　　141.8 　看呐，不用图片　　171.9 　HTML5和CSS3现在就能用吗　　201.10 　响应式网页设计不是灵丹妙药　　201.11 　引导客户：网站不必在所有浏览器中表现一致　　211.12 　小结　　22第2章 　媒体查询：支持不同的视口　　232.1 　现在就能使用媒体查询　　232.2 　为什么响应式设计需要媒体查询　　242.2.1 　媒体查询语法　　242.2.2 　 媒体查询能检测那些特性　　262.2.3 　用媒体查询改造我们的设计　　272.2.4 　加载媒体查询的最佳方法　　272.3 　我们的第一个响应式设计　　272.3.1 　我们的设计是固定宽度的，不要惊讶　　282.3.2 　响应式设计中要保证图片尽可能精简　　322.3.3 　小视口下的内容剪切　　332.4 　阻止移动浏览器自动调整页面大小　　342.5 　针对不同视口宽度修正设计　　372.6 　响应式设计中内容始终优先　　382.7 　媒体查询只是必要条件之一　　422.8 　小结　　42第3章 　拥抱流式布局　　433.1 　固定布局经不起未来考验　　433.2 　为什么响应式设计需要百分比布局　　443.3 　将网页从固定布局修改为百分比布局　　443.3.1 　需要牢记的公式　　453.3.2 　设置百分比元素的上下文　　473.3.3 　必须时刻牢记上下文　　523.4 　用em替换px　　543.5 　弹性图片　　563.5.1 　让图片随视口缩放　　563.5.2 　为特定图片指定特定规则　　583.5.3 　给弹性图片设置阈值　　593.5.4 　超级全能的max-width属性　　613.6 　为不同的屏幕尺寸提供不同的图片　　613.7 　流动网格布局和媒体查询的默契配合　　663.8 　CSS网格系统　　663.9 　小结　　72第4章 　响应式设计中的HTML5　　734.1 　HTML5的哪些部分现在就能用　　734.1.1 　大多数网站可以用HTML5编写　　744.1.2 　腻子脚本和Modernizr　　744.2 　如何编写HTML5网页　　754.2.1 　HTML5的精简之道　　764.2.2 　HTML5标签的合理写法　　764.2.3 　伟大的&a&标签万岁　　774.2.4 　HTML的废弃零件　　774.3 　HTML5的全新语义化元素　　784.3.1 　&section&　　784.3.2 　&nav&　　794.3.3 　&article&　　794.3.4 　&aside&　　794.3.5 　&hgroup&　　794.3.6 　&header&　　814.3.7 　&footer&　　814.3.8 　&address&　　814.4 　HTML5结构元素的实际用法　　814.5 　HTML5的文本级语义元素　　874.5.1 　&b&　　884.5.2 　&em&　　884.5.3 　&i&　　884.5.4 　在页面中应用文本层语义元素　　884.6 　遵循WAI-ARIA实现无障碍站点　　904.7 　在HTML5中嵌入媒体　　934.8 　用HTML5的方法为页面添加视频或音频　　934.8.1 　提供备用的媒体源文件　　954.8.2 　针对老版本浏览器的备用方案　　954.8.3 　和标签的用法基本一致　　964.9 　响应式视频　　964.10 　离线Web应用　　994.10.1 　离线Web应用概述　　994.10.2 　让网页可离线使用　　994.10.3 　理解manifest文件　　1004.10.4 　页面被自动加载到离线缓存　　1014.10.5 　版本注释的用途　　1014.10.6 　离线访问网站　　1014.10.7 　离线Web应用的故障诊断　　1024.11 　小结　　103第5章 　CSS3：选择器、字体和颜色模式　　1045.1 　CSS3给前端开发人员带来了什么　　1045.1.1 　Internet Explorer 6到8对CSS3的支持　　1055.1.2 　使用CSS3设计和开发页面　　1055.2 　CSS规则解析　　1055.3 　私有前缀及其用法　　1065.4 　快速而有效的CSS技巧　　1085.4.1 　CSS3多栏布局　　1085.4.2 　文字换行　　1105.5 　CSS3的新增选择器及其用法　　1115.5.1 　CSS3属性选择器　　1115.5.2 　CSS3结构伪类　　1135.5.3 　对伪元素的修正　　1225.6 　自定义网页字体　　1235.6.1 　@font-face规则　　1245.6.2 　使用@font-face嵌入网页字体　　1245.7 　帮帮我，标题模糊怎么办　　1275.8 　新的CSS3颜色格式和透明度　　1295.8.1 　RGB颜色　　1305.8.2 　HSL颜色　　1315.8.3 　针对IE6、IE7和IE8提供备用颜色值　　1325.8.4 　透明通道　　1325.9 　小结　　134第6章 　用CSS3创造令人惊艳的美　　1356.1 　文字阴影　　1366.1.1 　HEX、HSL或RGB颜色都可以　　1366.1.2 　px、em或rem都行　　1366.1.3 　取消文字阴影　　1386.1.4 　制作浮雕文字阴影效果　　1396.1.5 　多重文字阴影　　1406.2 　盒阴影　　1406.2.1 　内阴影　　1416.2.2 　多重阴影　　1426.3 　背景渐变　　1436.3.1 　线性背景渐变　　1446.3.2 　径向背景渐变　　1476.3.3 　重复渐变　　1496.4 　背景渐变图案　　1516.5 　CSS3的响应性　　1536.6 　组合使用CSS3属性　　1556.7 　多重背景图片　　1596.7.1 　背景图片大小　　1616.7.2 　背景图片位置　　1616.7.3 　背景属性的缩写语法　　1616.8 　更多CSS特性　　1626.9 　可缩放图标：响应式设计中的完美选择　　1626.10 　小结　　163第7章 　CSS3过渡、变形和动画　　1647.1 　什么是CSS3过渡以及如何使用它　　1647.1.1 　过渡相关的属性　　1667.1.2 　响应式网站中的有趣过渡　　1687.2 　CSS3的2D变形　　1697.3 　尝试CSS3的3D变形　　1747.3.1 　分析3D变形效果　　1767.3.2 　3D变形尚未成熟　　1787.4 　CSS3动画效果　　1797.5 　小结　　185第8章 　用HTML5和CSS3征服表单　　1868.1 　HTML5表单　　1868.1.1 　理解HTML5表单中的元素　　1888.1.2 　placeholder　　1898.1.3 　required　　1898.1.4 　autofocus　　1908.1.5 　autocomplete　　1918.1.6 　list（及对应的datalist元素）　　1918.1.7 　HTML5的新输入类型　　1928.1.8 　日期和时间输入类型　　1988.2 　如何给不支持新特性的浏览器打补丁　　2038.3 　使用CSS3美化HTML5表单　　2048.4 　小结　　210第9章 　解决跨浏览器问题　　2119.1 　渐进增强与优雅降级　　2159.2 　该不该修复老版本IE　　2169.2.1 　统计数据（再看看世界的变化）　　2169.2.2 　个人选择　　2169.3 　前端的瑞士军刀：Modernizr　　2179.3.1 　使用Modernizr辅助修正样式问题　　2199.3.2 　使用Modernizr让老版本IE支持HTML5元素　　2219.3.3 　给IE6、7、8追加min/max媒体查询功能　　2229.3.4 　使用Modernizr按需加载资源　　2239.4 　必要时将导航链接转换为下拉菜单　　2259.5 　高分辨率设备（未来趋势）　　2289.6 　小结　　231响应式web设计电子书简介本书堪称学习响应式Web设计的难得佳作。它不仅全面、细致、图文并茂地介绍了响应式设计相关的技术，比如媒体查询、流式布局、弹性媒体和弹性字体等，还把近几年来Web设计领域公认的最佳设计理念有机地融入到了实例当中，比如移动先行（Mobile First）、渐进增强、平稳退化、无障碍设计等。响应式web设计电子书内容截图
安卓官方手机版
IOS官方手机版
响应式Web设计(HTML5和CSS3实战)截图
网站开发是用来制作一些比较专业的网站，比如动态网页、ASP、PHP、JSP。网站开发一般都需要原创的，但是网站制作可以用别人的模板。因为网站开发比网站制作有更深的进步，它不仅包含网站美工和内容，也有可能涉及到域名注册查询、网站的一些功能的开发。...
中文 / 144.8M dreamweaver，简称”dw“，全球超95%的网页设计工作者都是用的dreamweaver，真正视觉化的网页设计，创造了颠覆性的改变，让它足以屹立于世界的顶端！看似Adobe旗下有很多精品软件，其实大部分都是靠收购完成的，dreamweaver也一样。最新cs6破解版，欢迎下载！
中文 / 60.1M 小编以前读书的时候用的就是Dreamweaver8.0，当时感觉好高大上、好难的样子，其实真正接触之后，也没那么复杂。这里给大家分享Dreamweaver8.0破解版，一次破解激活，终生享用！
中文 / 60.1M 一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你
中文 / 1.2M AdobeCS系列软件有着辉煌的过去，尽管现在全线步入CC时代，但是用CS的依旧是大多数。小编这里提供DreamweaverCS4注册机+破解补丁，完美破解激活DWCS4，然后还附有永久序列号，绝对让你真正享用此版本。欢迎下载！
中文 / 128KB 今天小编和大家分享的是dreamweaver cs4教程，具体为dreamweaver cs4制作网站入门级教程，为doc格式，适合dreamweaver入门学习。有需要的朋友可立即下载此文档。
dreamweaver cs4制作网站入门级教程(新手必看)
响应式Web设计(HTML5和CSS3实战) pdf高清完整版【无水印】
本类最新软件
本类软件推荐
125KB / 06-01 / 【化学logo素材】
23.9M / 06-01 / pdf格式免费版【05S52图集】
1.8M / 06-01 / pdf格式免费高清版【无水印】
19.1M / 06-01 / pdf格式免费版【清晰图集】
12.3M / 06-01 / pdf格式免费版【高清图集】
本类软件排行
装机必备软件
素材字体高考学习
请简要描述您遇到的错误，我们将尽快予以修正。
轮坛转帖HTML方式
轮坛转帖UBB方式更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
使用您的微博帐号登录，即刻尊享微博用户专属服务。
使用您的QQ帐号登录，即刻尊享QQ用户专属服务。
使用您的人人帐号登录，即刻尊享人人用户专属服务。
内容提供方：
总播放量：
播放量数据：
方式2：免费发送短信到手机
此短信不收取任何费用，保证您的手机号安全不被泄露
下载APP到本机
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
收藏成功，可进入查看所有收藏列表
安装爱奇艺视频桌面版，只需10秒马上开始下载本专辑
您上次观看到{{videoOrder}}集{{#wHour}}{{wHour}}时{{/wHour}}{{#wMinutes}}{{wMinutes}}分{{/wMinutes}}{{#wSeconds}}{{wSeconds}}秒{{/wSeconds}}
正在加载...
当前剧集目前暂无内容或版权，请持续关注更新
{{ each data as item index}}
{{if item.isYugao}}
{{/if}} {{if item.isNeedPay }}
{{else if item.isNew }}
{{/if}}{{/each}}
正在加载...
当前剧集目前暂无内容或版权，请持续关注更新
{{ each data as item index}}
响应式Web设计_1.Responsive Web Design_开篇
响应式Web设计_2.什么是响应式Web设计
响应式Web设计_3.为什么需要响应式Web设计
正在加载...
该专辑目前暂无剧情，请持续关注更新
{{ each data as item index}} {{if item.desc && !item.isYugao}}
{{if item.vurl}}
{{else}}第{{item.pd}}集{{/if}}
{{item.desc}}
{{if item.videoFocuses }}
{{ each item.videoFocuses as item0 index2 }}
{{item0.timeV2}}{{if item0.vPointUrl}}
{{else}}{{item0.desc}}{{/if}}{{/each}}{{/if}}{{/if}} {{/each}}
正在加载...
该专辑目前暂看点，请持续关注更新
{{ each data as item index}} {{if item.desc }}
{{if item.vUrl}}
{{else}}{{item.shortTitle}}{{/if}}
{{item.desc}}
{{if item.videoFocuses }}
{{ each item.videoFocuses as item0 index2 }}
{{item0.timeV2}}{{if item0.vPointUrl}}
{{else}}{{item0.desc}}{{/if}}{{/each}}{{/if}}{{/if}} {{/each}}
该专辑目前暂无片花，请持续关注更新
该专辑目前暂无预告片，请持续关注更新
爱奇艺客户端下载
正在加载...
{{ each data as item index}}
{{item.playCount_v2}}
{{if !item.solo && item.latestOrder }}
{{if item.latestOrder == item.videoCount }}
{{item.videoCount}}集全
{{else if (item.videoCount===0 && item.latestOrder>item.videoCount) }}
更新至{{item.latestOrder}}
{{else if (item.videoCount && item.latestOrder<item.videoCount) }}
{{if item.latestUrl}}{{else}}更新至{{item.latestOrder}}{{/if}}/共{{item.videoCount}}集
教育风云榜
选择下载剧集> 什么是响应式网页设计？响应式布局的实现原理
什么是响应式网页设计？响应式布局的实现原理
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。
PC互联网加速向移动端迁移：2012年12月底我国网民规模达到5.64亿，互联网普及率为42.1%，手机用户占网民总数的74.5%。预计到2015年，移动互联网的数据流量将超越PC端的流量。
移动端入口：当用户希望通过手机来完成PC页的操作时，常见的是商家的运营微博，期文案足够吸引用户点击链接参加活动，如果该活动页没做响应式处理：页面体积大、请求多、体验差、兼容性差，层层阻碍最终导致用户放弃参加。
优势 开发成本低，门槛低
Native APP：Objective-C or Java & 学习成本高
Hybrid APP： 外壳+Web APP，需安装。
响应式Web APP：HTML5+JS+CSS & 门槛低，极易上手，迭代快
跨平台和终端且不需要分配子域
虽然可通过监测用户UA来判断用户终端后做跳转，但它还是分配了多个域，而响应式无需监测用户UA没有域的切换，只需根据终端类型来适配不同的功能模块与表现样式，它是跨平台和终端的，1页面适配多终端。
响应式：PC & Mobile &
Web App可以利用本地存储的特性将重要和重复的数据保存在本地，避免页面的重复刷新，减少重要信息在传输过程中被泄露，增量传输修改内容。
无需安装成本，迭代更新容易
更灵活、更方便的APP使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一
首先我们应该遵循移动优先原则，交互&设计应以移动端为主，PC则作为移动端的一个扩展；
一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：
响应式布局
响应式内容（图片、多媒体）
响应式布局
如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？
那么我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应，如以下页面中各模块在不同尺寸下的位置：
那么我们要怎么做？
Meta标签定义
使用 viewport meta 标签在手机浏览器上控制布局
&meta name=&viewport& content=&width=device-width,initial-scale=1,maximum-scale=1& /&
通过快捷方式打开时全屏显示
&meta name=&apple-mobile-web-app-capable& content=&yes& /&
隐藏状态栏
&meta name=&apple-mobile-web-app-status-bar-style& content=&blank& /&
iPhone会将看起来像电话号码的数字添加电话连接，应当关闭
&meta name=&format-detection& content=&telephone=no& /&
适配对应样式
常用于布局的CSS Media Queries有以下几种
设备类型(media type):
all所有设备
screen 电脑显示器
print打印用纸或打印预览视图
handheld便携设备
tv电视机类型的设备
speech语意和音频盒成器
braille盲人用点字法触觉回馈设备
embossed盲文打印机
projection各种投影设备
tty使用固定密度字母栅格的媒介，比如电传打字机和终端
设备特性(media feature):
width浏览器宽度
height浏览器高度
device-width设备屏幕分辨率的宽度值
device-height设备屏幕分辨率的高度值
orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape
aspect-ratio比例值，浏览器的纵横比
device-aspect-ratio比例值，屏幕的纵横比
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{ ... }
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){
selector{ ... }
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){
selector{ ... }
适用于布局的 Media Queries 这里不做详述，可通过官方文档进一步了解
那么对于表格(table)的响应式处理该是怎样的呢？我们该如何突破Table的局限性呢？
接下来我们来了解以下的几种针对表格响应式处理的方法：
隐藏不重要数据列
实现方法：
@media only screen and (max-width: 800px) {
table td:nth-child(2),
table th:nth-child(2) {display:}
@media only screen and (max-width: 640px) {
table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(7),
table th:nth-child(7),
table td:nth-child(8),
th:nth-child(8){display:}
以用户角度思考，每个人对数据的认知不同，或许你隐藏的数据对于他却是很重要的。所以这种方法不推荐。&>&&>&&>&&>&响应式Web设计：HTML5和CSS3实战
响应式Web设计：HTML5和CSS3实战
上传大小：1.51MB
第1章HTML5、CSS3和响应式网页设计入门
o 1.1 为什么智能手机很重要（而老版的IE 不再重要）
o 1.2 响应式设计一定是最佳选择吗
o 1.3 响应式网页设计的定义
o 1.4 为什么要在响应式设计上停滞不前
1.5 响应式网页设计示例
o 1.5.1 下载视口调试工具
o 1.5.2 在线创意源泉
1.6 为什么HTML5很优秀
o 1.6.1 省时省力
o 1.6.2 新增了语义化标签元素
1.7 CSS3为响应式设计和更多创新奠定了基础
o 1.7.1 底线：CSS3不破坏任何东西
o 1.7.2 CSS3如何解决日常设计问题
1.8 看呐，不用图片
o CSS3还带来了什么
o 1.9 HTML5和CSS3现在就能用吗
o 1.10 响应式网页设计不是灵丹妙药
o 1.11 引导客户：网站不必在所有浏览器中表现一致
前端笔记米点优站
o 1.12 小结
第2章媒体查询：支持不同的视口
o 2.1 现在就能使用媒体查询
o 2.2 为什么响应式设计需要媒体查询
o 2.2.1 媒体查询语法
o 2.2.2 媒体查询能检测那些特性
o 2.2.3 用媒体查询改造我们的设计
o 2.2.4 加载媒体查询的最佳方法
o 2.3 我们的第一个响应式设计
o 2.3.1 我们的设计是固定宽度的，不要惊讶
o 2.3.2 响应式设计中要保证图片尽可能精简
o 2.3.3 小视口下的内容剪切
o 2.4 阻止移动浏览器自动调整页面大小
o 2.5 针对不同视口宽度修正设计
o 2.6 响应式设计中内容始终优先
o 2.7 媒体查询只是必要条件之一
o 我们需要流动布局
o 2.8 小结
第3章拥抱流式布局
o 3.1 固定布局经不起未来考验
o 3.2 为什么响应式设计需要百分比布局
o 3.3 将网页从固定布局修改为百分比布局
前端笔记米点优站
o 3.3.1 需要牢记的公式
o 3.3.2 设置百分比元素的上下文
o 3.3.3 必须时刻牢记上下文
o 3.4 用em 替换px
o 3.5 弹性图片
o 3.5.1 让图片随视口缩放
o 3.5.2 为特定图片指定特定规则
o 3.5.3 给弹性图片设置阈值
o 3.5.4 超级全能的max-width 属性
o 3.6 为不同的屏幕尺寸提供不同的图片
o 设置自适应图片
o···把背景图片放在其他地方
o 3.7 流动网格布局和媒体查询的默契配合
o 3.8 CSS 网格系统
o 使用网格系统快速搭建网站
o 3.9 小结
第4章响应式设计中的HTML5
o 4.1...展开收缩
嵌到我的页面
<input type="text" value="">
综合评分：2.5（23位用户评分）
收藏（(3)）
所需积分：2
下载次数：95
审核通过送C币
创建者：leavingchen
创建者：nliuwenpeng
课程推荐相关知识库
上传者其他资源上传者专辑
移动开发热门标签
VIP会员动态
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
响应式Web设计：HTML5和CSS3实战
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
computer_jeff
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
响应式Web设计的概念，应该怎样做响应式Web设计
破洛洛文章简介：什么是响应式Web设计？怎样进行？
开始第一篇。老规矩，先无聊的谈论天气一类的话题。十一长假，天气也终于开始有些秋天的味道，坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期里开始做Joomla文档翻译的；长假好时光，总会可以抽出一两天，安静的窝在家里做做博客、学做些新东西，简直没有比这更舒心的事情。
说正事儿。准备在近期的几篇里集中翻译学习一下&响应式Web设计&的相关话题，包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文，这些文章篇幅要长的多(甚至要加分页了！)，今天放上的这篇几乎花掉了两天的&闲暇时间&；对耐力是个考验，努力提高喽。废话结束，here we go.
眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle&&各自打造一款&&页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面？这种疯狂什么时候算个头？
在Web设计和开发领域，很快的，我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的；结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。不过，或许会有另外一种方式，可以帮助我们避免这种情况的发生。
响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
响应式Web设计的概念
Ethan Marcotte曾经在A List Apart发表过一篇文章&&，文中援引了响应式建筑设计的概念：
最近出现了一门新兴的学科&&&响应式建筑(responsive architecture)&&&提出，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产&智能玻璃&：当室内人数达到一定的阀值时，这种玻璃可以自动变为不透明，确保隐私。
将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。
显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。
调整分辨率
不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不断被研发着的各种新设备也将带来新的屏幕尺寸规格。有些设备基于横屏(portrait)，有些是竖屏(landscape)，甚至还有正方形；对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑，用户还可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况？
要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向)，我们就必须考虑N种屏幕尺寸规格。诚然，我们可以将这些规格划分为几个大类，然后为每一类做一种方案，确保该方案至少在本组中尽量具有弹性。但即使这样，结果也将是无比焦虑的，谁知道某类设备在5年之后的占有率是多少？而且很多用户甚至不去将浏览器的窗口最大化；类似这样的变数，我们还要考虑多少呢？
Morten Hjerde和他的同事们对年市场中的400余种移动设备进行了统计()，下图展示了大致的统计结果：
在08年之后，更多更有代表性的新设备问世并普及了。显然，我们不可以沿着&多方案&的思路继续走下去；那么我们应该怎样做呢？
部分解决方案：一切弹性化
几年前，弹性布局(flexible layout)几乎是一种奢侈品，所谓弹性，也只是体现在竖排布局以及字号等方面；图片始终可以轻易的破坏页面结构，而且即使是哪些弹性的元素结构，在很极端的情况下，仍会破坏布局。所以，所谓的弹性布局其实并非那样弹性，它有时甚至不能适应台式机与笔记本的屏幕分辨率差异，更不用说手机等移动设备了。
现在，我们可以通过响应式的设计和开发思路让页面更加&弹性&了。图片的尺寸可以被自动调整，页面布局再不会被破坏。虽然永远没有最完美的解决方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。
在前文提到的Ethan Marcotte的文章中，他通过展示了响应式Web设计在页面弹性方面的特性：
该实例的实现方式完美的结合了液态网格和液态图片技术，并且聪明的在正确的地方使用了正确的HTML标记。&液态网格&是一种很常见的实践方式；对于&液态图片&技术，下面的文章做了不错的介绍：
说到创建液态页面，最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》，或是下载个样章先：&&。另外，Zoe的这篇&&提供了不少关于创建弹性网格和布局的教程、资源、创意指导和最佳实践方式。
从技术角度讲，虽然听上去这些都简单可行，但它比&将这些功能结合在一起&要复杂些。举个例子，仔细观察Ethan Marcotte提供的实例中的logo图片：
如果我们将浏览器窗口不断调小，会发现logo图片的文字部分始终会保持同比缩小，保证其完整可读，而不会和周围的插图一样被两边裁掉。所以整个logo其实包括两部分：插图作为页面标题的背景图片，会保持尺寸，但会随着布局调整而被裁切；文字部分则是一张单独的图片。
&h1 id=&logo&&&a href=&#&&&img src=&site/logo.png& alt=&The Baker Street Inquirer& /&&/a&&/h1&
其中，&h1&元素使用插图作为背景，文字部分的图片始终保持与背景的对齐。
这个实例小小的展示一下响应式Web设计的思路。不过这点小努力还不足以避免整个布局在小尺寸窗口中变的过窄或过短，并且logo文字最终会变的小到难以识别，背景图片也会被过多的裁切。
破洛洛文章简介：什么是响应式Web设计？怎样进行？
响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术，其中有不少是简单易行的。其中，由Richard Rutter最先尝试的一种做法比较流行，即使用CSS的max-width属性。这个方法在Ethan Marcotte的一文中也有提到。
img { max-width: 100%;}
只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则，页面上所有的图片就会以其原始宽度进行加载，除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会容器边缘隐藏和覆盖。实际上，就像Jason Grigsby在他的一文中提到的，&液态图片背后的思路，就是无论何时，都确保在其原始宽度范围内，以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度，只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。& 一种简而美的方法。
图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法，可以很轻松的缩放图片，确保在移动设备的窗口中可以被完整浏览，但如果原始图片本身过大，便会显著降低图片文件的下载速度，对存储空间也会造成没有必要的消耗。
响应式图片
由Filament Group提出的&响应式图片&技术思想，有助于解决上面提到的问题：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。可以看下先。
这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。具体使用方法可以参考。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径&/rwd-router&。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的&响应式图片&，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。
这项技术支持多数的现代浏览器，包括IE8+、Safari、Chrome和Opera，以及这些浏览器的移动设备版本；在FireFox及一些旧浏览器中，则会优雅降级：我们仍可得到小图片的输出，但同时，原始大图也会被下载。
禁用iPhone中的图片自动缩放
在iPhone及iPod Touch中，页面会被自动的同比例缩小至最适合屏幕大小的尺寸，x轴不会产生滚动条，用户可以上下拖拽浏览全部页面，或在需要的时候放大页面的局部。这里会产生一个问题，即使我们运用响应式Web设计的思想，专门为iPhone的小屏输出小图片，它同样会随着整个页面一起被同比例缩小，如下图左侧所示。
我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的&head&部分添加以下代码(详情可以参考)：
&meta name=&viewport& content=&width=device- initial-scale=1.0&&
将initial-scale的值设定为&1&，即可覆写默认的缩放方式，保持原始的尺寸及比例。更多关于viewport meta标记的用法，可以参考苹。
破洛洛文章简介：什么是响应式Web设计？怎样进行？
打造布局结构
当页面所需要适应的不同设备的屏幕尺寸差异过大时，除了图片方面，我们也应该考虑到整个布局结构的响应式调整；我们可以使用独立的样式表，或者更有效的，使用CSS media query。这不会引起多大的麻烦，多数样式设定不会被影响和改变，只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。
我们可以使用一个默认主样式表来定义页面的主要结构元素，比如#wrapper、#content、#sidebar、#nav等的默认布局方式，以及一些全局性的配色和字体方案。
我们可以监测页面布局随着不同的浏览环境而产生的变化，如果它们变的过窄过短或是过宽过长，则通过一个子级样式表来继承主样式表的设定，并专门针对某些布局结构进行样式覆写。我们来看下代码示例：
下面的代码可以放在默认主样式表style.css中：
/* Default styles that will carry to the child style sheet */html,body{background...font...color...}h1,h2,h3{}p, blockquote, pre, code, ol, ul{}/* Structural elements */#wrapper{width: 80%;margin: 0background: #padding: 20}#content{width: 54%;float:margin-right: 3%;}#sidebar-left{width: 20%;float:margin-right: 3%;} #sidebar-right{width: 20%;float:}
下面的代码可以放在子级样式表mobile.css中，专门针对移动设备进行样式覆写：
#wrapper{width: 90%;}#content{width: 100%;}#sidebar-left{width: 100%;clear:/* Additional styling for our new layout */border-top: 1px solid #margin-top: 20}#sidebar-right{width: 100%;clear:/* Additional styling for our new layout */border-top: 1px solid #margin-top: 20}
大致的视觉效果如下图所示：
Media Queries
CSS3支持CSS2.1所支持的所有媒体类型，例如screen、print、handheld等，同时添加了很多涉及媒体类型的功能属性，包括max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向，横屏或竖屏)和color。在CSS3发布之后出现的新玩具，如iPad或Android相关设备，都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式，而忽略那些不支持CSS3的台式机中的旧浏览器。
在Ethan的文章中，我们能看到一段media query使用实例：
&link rel=&stylesheet& type=&text/css& media=&screen and (max-device-width: 480px)& href=&shetland.css& /&
代码本身可以很好的说明工作机制：如果页面通过屏幕呈现(非打印一类)，并且屏幕宽度不超过480px，则加载shetland.css样式表。要了解更多关于CSS3媒体新属性的信息，可以参考&&一文。
我们可以创建多个样式表，以适应不同设备类型的宽度范围。中的&Meet the media query&部分有更多的范例及解释。更有效率的做法是，将多个media queries整合在一个样式表文件中：
/* Smartphones (portrait and landscape) ----------- */@media only screenand (min-device-width : 320px)and (max-device-width : 480px) {/* Styles */}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {/* Styles */}/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* Styles */}
上面的代码来自于Andy Clark创建的可以兼容各种主流设备的免费模板。这样整合多个media queries于一个样式表文件的方式，与通过media queries调用不同样式表的方式之间的区别与联系，可以参考&&一文。
CSS3 Media Queries
上面演示的一些代码范例是CSS2.1与CSS3通吃的。现在让我们来看看怎样使用CSS3专有的media queries功能来创建响应式Web设计。其中某些方法在当前就有切实的使用价值，不久的将来则一定会全部派上用场。
min-width和max-width这两个属性很靠谱。通过min-width的设置，我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下，为页面指定一个特定的样式表；max-width则反之。
下面的几个示例中，我们使用的是将多个media queries整合在单一样式表中进行编码的句法。如前文所述，这样做更加高效，减少请求数量。
@media screen and (min-width: 600px) {.hereIsMyClass {width: 30%;float:}}
上面代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px时才会有效。
@media screen and (max-width: 600px) {.aClassforSmallScreens {clear:font-size: 1.3}}
而这段代码的作用则相反：aClassforSmallScreens类只有在浏览器或屏幕宽度小于600px时才会有效。
可以看出min-width和max-width可以同时判断设备屏幕尺寸与浏览器实际宽度。有些时候，我们希望通过media queries作用于某种特定的设备，而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时，我们需要使用min-device-width与max-device-width，用来判断设备本身的屏幕尺寸。
@media screen and (max-device-width: 480px) {.classForiPhoneDisplay {font-size: 1.2}}
@media screen and (min-device-width: 768px) {.minimumiPadWidth {clear:margin-bottom: 2px solid #}}
还有一些其他方法，可以帮我们有效的使用media queries锁定某些指定的设备。可以参考下面两篇出自Thomas Maier的文章：
对于iPad来说，orientation属性尤其有用。它的值可以是landscape(横屏)或portrait(竖屏)。
@media screen and (orientation: landscape) {.iPadLandscape {width: 30%;float:}}
@media screen and (orientation: portrait) {.iPadPortrait {clear:}}
不幸的是，这个属性目前确实只在iPad上有效。对于其他可以转屏的设备，譬如iPhone，可以使用min-device-width和max-device-width来变通实现；详情可以参考&&一文。
我们还可以将上述属性组合使用，来锁定某个屏幕尺寸范围：
@media screen and (min-width: 800px) and (max-width: 1200px) {.classForaMediumScreen {background: #cc0000;width: 30%;float:}}
上面的代码可以作用于浏览器窗口或屏幕宽度在800px至1200px之间的所有设备。
其实，很多设计师和开发者仍会选择使用多个样式表的方式来实现media queries。如果从资源的组织和维护的角度出发，其益处确实高于效率的损耗的话，那么这样做也完全不坏：
&link rel=&stylesheet& media=&screen and (max-width: 600px)& href=&small.css& /&&link rel=&stylesheet& media=&screen and (min-width: 600px)& href=&large.css& /&&link rel=&stylesheet& media=&print& href=&print.css& /&
所以呐，凡事没有绝对，最好根据实际情况决定使用media queries的方式。比如，对于iPad，我们可以将多个media queries直接写在一个样式表中。因为iPad用户随时有可能切换屏幕定向，这种情况下，要保证页面在极短的时间内响应屏幕尺寸的调整，我们必须选择效率最高的方式。
JavaScript
JavaScript也是我们的武器之一，特别是当某些旧设备无法完美支持CSS3的media query时，它可以作为后备支援。幸运的是，已经有专门的JS库来帮助旧浏览器(IE 5+，Firefox 1+，Safari 2等)支持CSS3的media queries。使用方法很简单，下载并在你的页面中调用它。
而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度，并为不同的情况调用不同的样式表：
&script type=&text/javascript& src=&/ajax/libs/jquery/1.4.4/jquery.min.js&&&/script&&script type=&text/javascript&&$(document).ready(function(){$(window).bind(&resize&, resizeWindow);function resizeWindow(e){var newWindowWidth = $(window).width();// If width width is below 600px, switch to the mobile stylesheetif(newWindowWidth & 600){$(&link[rel=stylesheet]&).attr({href : &mobile.css&});} // Else if width is above 600px, switch to the large stylesheetelse if(newWindowWidth & 600){$(&link[rel=stylesheet]&).attr({href : &style.css&});}}});&/script&
破洛洛文章简介：什么是响应式Web设计？怎样进行？
显示或隐藏内容
通过前文的学习，我们已经了解到，对于响应式Web设计，同比例缩减元素尺寸以及调整页面结构布局，是两个重要的方式方法。但是对于页面中的文字内容信息来说，则不能简单的只从&同比缩小&和&调整布局结构&这两方面去处理。对于手机等移动设备来说，在文字内容方面，已经有了很多最佳实践方式和指导原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。
响应式Web设计的思想，一方面要保证页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸；另一方面，则是增强可读性和易用性，帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。
有一条样式代码，我们已经使用了多年：
我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素，也可以使用前文的方法，通过JS判断当前硬件屏幕规格，在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如，对于手机类设备，我们可以隐藏掉大块的文字内容区，而只显示一个简单的导航结构，其中的导航元素可以指向详细内容页面。
注意，不要使用visibility: hidden的方式，因为这只能使元素在视觉上不做呈现；display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说，避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例：
图中上半部分是大屏幕设备所显示的完整页面，下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下：
&p class=&sidebar-nav&&&a href=&#&&Left Sidebar Content&/a& | &a href=&#&&Right Sidebar Content&/a&&/p&&div id=&content&&&h2&Main Content&/h2&&/div&&div id=&sidebar-left&&&h2&A Left Sidebar&/h2&&/div&&div id=&sidebar-right&&&h2&A Right Sidebar&/h2&&/div&
下面是默认的主样式表，其中，我们要隐藏掉链接导航部分(sidebar-nav)，因为默认样式适用的设备屏幕会足够大，足够显示包括两个侧边栏在内的所有内容。
#content{width: 54%;float:margin-right: 3%;}#sidebar-left{width: 20%;float:margin-right: 3%;}#sidebar-right{width: 20%;float:}.sidebar-nav{display:}
下面是用于小屏幕移动设备的样式表代码。现在，我们要隐藏掉两个侧边栏，并使sidebar-nav显示出来。借助JavaScript，当用户点击sidebar-nav中的链接时，对应的侧边栏可以恢复显示。当然，触发恢复显示的方式有很多种，即可以通过JS改变侧边栏的display属性值，也可以为其添加额外的布局样式。
#content{width: 100%;}#sidebar-left{display:}#sidebar-right{display:}.sidebar-nav{display:}
现在，我们的页面已经可以随着设备和屏幕规格的变更，响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特别是对于手机设备，我们还要在实践过程中注意一些该类设备共有的设计指导原则。比如，针对手机设备，使用一个特定的样式，将页面原有的文字导航元素变为更易操作的图标形式。下面的一些文章资源可作参考阅读：
触屏与鼠标
触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品，比如手机，但是市场上越来越多的大屏幕设备也开始使用触屏技术；且不说iPad一类的平板电脑，就连一些笔记本和台式机也加入了这一行列。比如，即使用传统的键鼠设备，同时也加入了触屏技术。
相比于传统的基于鼠标指针的互动，触屏技术显然带来了截然不同的交互方式与相应的设计规范；两者又有各自所适用的领域。所幸，要使我们的设计方案同时满足这两类设备的规范，并非一件难事，只是有些地方需要注意。比如，触屏设备无法反映CSS定义的hover行为及相应的样式，因为它没有鼠标指针的概念，手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。
有兴趣的话，可以读读这篇&&，这里提到的很多建议即有利于改进针对触屏设备的设计方式，同时也不会削弱传统键鼠设备上的用户体验。比如，放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作，而左手负责握住设备；这样，放在右侧的导航列表即方便右手的点击，又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。
作者：C7210
类似这样的解决方案还有很多。所以我们要清楚，media queries不是一个绝对唯一的答案，它只是一个以纯CSS方式实现响应式Web设计思路的手段。借助JavaScript，我们则可以实现更多的变化。这篇&&向我们展示了JavaScript配合media queries的更多细节信息。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：}