学习响应式设计笔记

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)表示条件。
    • 在连接时使用媒体查询 <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和屏幕阅读器友好，再调节样式。
• 默认的布局是从上到下的一块一块。
• 从用户研究和内容策略入手，再以文本模式进行设计，然后从小屏幕开始绘制各断点草图和响应式原型，布局后进行渐进增强。为什么从小屏幕开始，小屏幕限制多，如果在小屏幕可以适配到，那么到大屏幕有更大的空间，布局更加自由一些。

• 手机的巨大困扰 —快捷的获取到信息
  1. 屏幕小 触摸容易误触
     • 一个按键大小为35-45px 增大触摸目标
  2. 多点触摸式的手势识别
  3. 触摸时无悬停效果

5.?响应式网站的参照设计

• 一行长度以45-75为宜，太小需要频繁换行，太长阅读起来吃力。
• 默认字体大小一般为16px，设置行高来改变行内元素的高度。
• 采用相对单位设计 em(可能会引起乘法效果) rem（相对于整篇的文字大小）
• 导航的参照设计http://bradfrost.github.io/this-is-responsive/patterns.html  http://responsive-nav.com/

来自为知笔记(Wiz)