学习响应式设计笔记
Contents
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属性。 -
用例：
IE支持：使用腻子(ployfill)或利刃(shiv)脚本。在站点的head标签内使用条件注释(conditional comment)连接它。<article ></article><aside>网站或者整个页面相关的，如果嵌套在article中，则是文章相关的内容。对应的WAI-ARIA属性是complementary。<!--[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模型：
浮动：可以是内容流环绕特定的元素。
-
左浮动 右浮动：设置浮动后可以使块元素在末尾不换行
-
清除浮动：
- 浮动元素后面接空div元素,div元素属性为clear:both
- 父元素+伪元素 .clear{zoom:1} .clear:after{ visibility:hidden;clear:both;content:“ ”display:none;height:0}
- 父元素 width:100% overflow:hidden
- 使用br
定位：
-
静态定位：默认的布局方式 ，从上到下，从左到右，先扫描，确保到了后面不会有阻隔的地方。
-
相对定位：不脱离文档流，参照点为相对于在文档流的位置。使用了以后会有位置属性(top bottom left right)和z-index属性。
-
绝对定位：脱离文档流，且内容随着容器的宽度增长而增长，除了层叠效果，不会对其他元素造成布局影响。使用了以后会有位置属性(top bottom left right)和z-index属性。
-
固定定位：随着用户滚动鼠标位置也不变的。 CSS的组织方式：
- 按照页面组织
- 按照类型组织
-
媒体查询
@media only screen and (min-width:40em)解释：@media表示媒体查询 only 表示将后面{}内得到东西与当前语句视为同一条语句，旧时代浏览器会略过媒体查询而执行{}中的内容，加上only，如果不识别，则为完整的略过后面的{}中内容的执行。 screen表示检测的是屏幕，此属性还可以使print等。 and 表示逻辑与，还有or not等， (mid-width:40em)表示条件。- 在连接时使用媒体查询
<link rel="stylesheet" href="xx.css" media="only screen and (min-width:40em)"> - 在sytle标签中使用
<style media="only screen and (min-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
4. 经典设计流程
- 内容策略—先用文本布局帮助理清结构，采用倒金字塔结构，确保用户最先看到的是重要内容：
-
以文本方式进行设计的用途：先理清结构，对RSS和屏幕阅读器友好，再调节样式。
-
默认的布局是从上到下的一块一块。
- 从用户研究和内容策略入手，再以文本模式进行设计，然后从小屏幕开始绘制各断点草图和响应式原型，布局后进行渐进增强。为什么从小屏幕开始，小屏幕限制多，如果在小屏幕可以适配到，那么到大屏幕有更大的空间，布局更加自由一些。
- 手机的巨大困扰 —快捷的获取到信息
- 屏幕小 触摸容易误触
- 一个按键大小为35-45px 增大触摸目标
- 多点触摸式的手势识别
- 触摸时无悬停效果
- 屏幕小 触摸容易误触
5. 响应式网站的参照设计
- 一行长度以45-75为宜，太小需要频繁换行，太长阅读起来吃力。
- 默认字体大小一般为16px，设置行高来改变行内元素的高度。
- 采用相对单位设计 em(可能会引起乘法效果) rem（相对于整篇的文字大小）
- 导航的参照设计http://bradfrost.github.io/this-is-responsive/patterns.html http://responsive-nav.com/
