内容简介

《学习响应式设计》分为四部分，全面介绍响应式Web设计策略与技术，引领大家掌握从项目立项到网站上线的响应式设计工作流程。首先介绍响应式设计及其与其他网页设计方法的区别。第二部分概述构建响应式站点的基础知识、需要掌握HTML和CSS知识、图像处理，以及响应式设计的核心：媒体查询。第三部分带大家全面了解响应式设计的工作流程，从用户体验的角度探讨响应式设计，确保网站在各种设备上的适应性和功能完备性。

作者简介

Clarissa Peterson，用户体验设计师、Web开发人员，响应式网站设计咨询公司Peterson/Kandy（位于蒙特利尔）联合创始人。她经常在开发者会议及研讨会上发表关于响应式设计、移动策略和用户体验方面的演讲。

目录

版权信息
O'Reilly Media, Inc.介绍
前言
第一部分 响应式设计基础
第1章 什么是响应式设计
1.1 一点儿基础
1.2 简史
1.3 为什么是响应式设计
1.4 总结
第2章 响应式内容
2.1 内容策略
2.2 内容整理
2.3 内容编写
2.4 内容平等
2.5 内容管理
2.6 自适应内容
2.7 总结
第二部分 创建响应式网站
第3章 响应式网站之HTML
3.1 使用 HTML
3.2 页面基本结构
3.3 视口
3.4 结构性元素
3.5 创建一个页面
3.6 清晰和语义化的HTML
3.7 总结
第4章 响应式网站之CSS
4.1 CSS的工作方式
4.2 CSS版本
4.3 置CSS于何处
4.4 层叠
4.5 使用层叠
4.6 注释
4.7 组织你的样式表
4.8 盒模型
4.9 显示
4.10 定位
4.11 浮动和清除
4.12 基本样式
4.13 总结
第5章 媒体查询
5.1 何为媒体查询
5.2 媒体查询结构
5.3 在样式表链接中使用媒体查询
5.4 使用媒体查询的其他方式
5.5 我们可以查询什么
5.6 浏览器支持
5.7 断点
5.8 设计范围
5.9 响应式设计
5.10 使用媒体查询
5.11 两列布局
5.12 设置最大宽度
5.13 如何选择断点
5.14 总结
第6章 图像
6.1 显示图像的方式
6.2 替代文本
6.3 图像文件格式
6.4 优化图像
6.5 内容图像
6.6 背景图像
6.7 响应式图像
6.8 总结
第三部分 玩转响应式设计
第7章 响应式设计工作流程
7.1 策略与规划
7.2 内容先于布局
7.3 考虑布局
7.4 原型
7.5 视觉设计
7.6 响应式设计工具
7.7 推销响应式设计
7.8 与客户合作
7.9 总结
第8章 岂止手机
8.1 用户体验
8.2 设备无关的设计
8.3 专注于移动优先
8.4 尽你所能
8.5 设备类型
8.6 触摸
8.7 屏幕尺寸
8.8 可访问性（通用化设计）
8.9 决定支持哪些设备
8.10 为何要用真实设备进行测试
8.11 测试
8.12 总结
第四部分 设计响应式网站
第9章 文字排版
9.1 始于HTML
9.2 字型
9.3 使用字体
9.4 调整文字大小
9.5 行长
9.6 留白
9.7 内边距和外边距
9.8 为屏幕尺寸改变字型
9.9 总结
第10章 导航及页眉布局
10.1 响应式导航
10.2 网站品牌
10.3 导航链接
10.4 导航模式
10.5 页眉
10.6 总结
第11章 性能
11.1 性能的重要性
11.2 性能作为设计元素
11.3 网页加载与渲染方式
11.4 性能测量
11.5 清理代码
11.6 将HTTP请求减至最少
11.7 服务器设置
11.8 JavaScript
11.9 CSS
11.10 托管
11.11 有条件地加载内容
11.12 重绘与回流
11.13 RESS
11.14 总结

感悟与笔记

1. 问题背景？

为不同分辨率的设备提供不同的网页，曾经的手机端与PC端分别维护一份代码，显得罗嗦，维护难，功能可能不统一等等。 只用一份代码，就可以在不同的设备上获得很好的显示效果。

• 每个设备都得到正确的设计
• 更少的工作
• 搜索优化 曾经手机端和PC端是两个不同的网站，容易使用户迷惑。

2. 什么是响应式设计和自适应设计有什么不同？

• 自适应(Adaptive)是元素位置变化 。
• 响应式(Responsive)是在不同大小的视口下(viewpoint)元素的位置、大小、都变化。
• 流式(liquid ) 元素的宽度按照屏幕调整。

3. 如何创建响应式网站

• HTML
  • viewpoint 属性

    • 什么是视口?浏览器里去掉菜单、工具栏、浏览器自身的其他部件。简单的说就是中间的最大的窗口。 未设置viewpoint属性的网页在桌面显示器上是以全尺寸的方式渲染的。
      <meta charset="utf-8">指明字符集 和语言 lang
      <meta name="viewpiont" content="width=device-width,initial-scale=1">其中width=“device-width”高速浏览器以全尺寸渲染模式。initial-scale指明按照width的属性的宽度进行渲染，不放大也不缩小。user-scaleable=no使用户不可缩放。 maximum-scale=2指定最大缩放比。
      

  • 语义化结构标签

    • WAI-ARIA, 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，指无障碍网页应用技术。
      <header> <nav> <footer><section><aside>
      <header>应包含介绍性和导航性的辅助内容如logo、搜索功能和主导航栏。对应的WAI-ARIA属性是banner 。
      				

    • 用例：<header role="banner"></header> <nav>通常放在header标签内。对应的WAI-ARIA属性是navigation。
    • 用例：<nav role="navigation"></nav> <footer>应包含版权信息，页面相关信息，相关材料连接。对应的WAI-ARIA属性是contentinfo。
    • 用例：<footer role="contentinfo"></footer> <article>网页上一块独立的内容。可能是一篇报纸、博客、帖子，这种类型的内容可以通过内容聚合来分发订阅（RSS）。没有WAI-ARIA属性。

    • 用例：<article ></article> <aside>网站或者整个页面相关的，如果嵌套在article中，则是文章相关的内容。对应的WAI-ARIA属性是complementary。

      IE支持：使用腻子(ployfill)或利刃(shiv)脚本。在站点的head标签内使用条件注释(conditional comment)连接它。
      • <!--[if lt IE 9] > <script scr="files/html5shiv.js> </script> <! [endif]--> 网站标题使用h1，内容标题使用h2 ;导航的设计习惯是放入ul中。
• CSS
  • CSS的工作方式：后代选择器 .classname p {} 类选择器 ID选择器 元素选择器 内联(在style属性中书写的) 独立规则 h1,h2{} 重要规则(!important) 伪类选择器(:afer :before)
  • 浏览器前缀,使用不同渲染引擎独有的属性，最好使用autoprefix来写。用例：连字符属性p{-webkit-hyphens:auto; -moz-hyphens:auto;-ms-hyphens:atuo; hyphens:auto }为什么最后面要加hyphens，如果支持最后一个，则忽略前面的属性设置。 继承规则：盒子模式的margin padding border 不会子元素继承。
• 盒子模型：
  • 显示效果：行内元素：无法设置高度，使用line-height来控制高度；text-indent 来控制缩进。块元素；列表项元素(list-item) 列表项前面的符合(list-styletype:disc)；
  • 盒子构成：margin padding border content 可以使用百分比来设置
  • 盒子的宽度:box-size属性 可取值为border-box或content-box
  • 盒子的居中效果： margin 0 auto; 此时宽度不能为100%否则观察不出效果。
  • 盒子的3D模型：
• 浮动：可以是内容流环绕特定的元素。
  • 左浮动 右浮动：设置浮动后可以使块元素在末尾不换行
  • 清除浮动：
    1. 浮动元素后面接空div元素,div元素属性为clear:both
    2. 父元素+伪元素 .clear{zoom:1} .clear:after{ visibility:hidden;clear:both;content:“ ”display:none;height:0}
    3. 父元素 width:100% overflow:hidden
    4. 使用br
• 定位：
  • 静态定位：默认的布局方式 ，从上到下，从左到右，先扫描，确保到了后面不会有阻隔的地方。
  • 相对定位：不脱离文档流，参照点为相对于在文档流的位置。使用了以后会有位置属性(top bottom left right)和z-index属性。
  • 绝对定位：脱离文档流，且内容随着容器的宽度增长而增长，除了层叠效果，不会对其他元素造成布局影响。使用了以后会有位置属性(top bottom left right)和z-index属性。
  • 固定定位：随着用户滚动鼠标位置也不变的。 CSS的组织方式：
    1. 按照页面组织
    2. 按照类型组织
  • 媒体查询 @media only screen and (min-width:40em) 解释：@media表示媒体查询 only 表示将后面{}内得到东西与当前语句视为同一条语句，旧时代浏览器会略过媒体查询而执行{}中的内容，加上only，如果不识别，则为完整的略过后面的{}中内容的执行。 screen表示检测的是屏幕，此属性还可以使print等。 and 表示逻辑与，还有or not等， (mid-width:40em)表示条件。
  • 相对单位 % em rem
    • CSS使用规则： 先使用最低级的优先级。 优先级排名 重要规则>内联规则>ID>类>元素>*（通用元素）
• 图像
  • 采用CSS的边框、阴影、渐变效果来代替图像。
  • 采用图标字体来代替图片
  • 使用css sprite来减少图片文件数量
  • 使用替代文本对搜索引擎和屏幕阅读器友好
  • 通过媒体查询来改变图像的大小，但更好的方案是根据不同的屏幕大小来获得不同分辨率的图像。srcset和picture标签都没有实现，但可以使用picturefill 腻子脚本
  • 服务器使用Adaptive image(在服务器传入一个大分辨率的图像，自动为其生成小分辨率的图像)
  • 防止图片超出父元素盒子max-width:100%；
  • background-img的居中对齐background-positon:center top;
• 测试浏览器的媒体参数 mqtest.io

会员免费下载

链接：https://pan.baidu.com/s/1eKDnyYjZaK6uTMB-T7Qy9g

提取码： ****** 查看

￥69/年 开通VIP会员

成为本站VIP会员即可无限下载。 请先点击百度网盘，看资源是否还在，不在请点击链接通知站长补资源。

资源标签点击标签可查看对应分类的资源

HTML5/CSS

资源推荐

免费 图解数据结构：使用Java

C++ 程序设计语言：第4部分 标准库（原书第4版）

C++编程思想（两卷合订本）

CSS世界

JavaScript DOM编程艺术（第2版）

C++ Primer Plus（第6版） 中文版

Vue.js快速入门

Java编程思想（第4版） [thinking in java]