学习响应式设计笔记

学习响应式设计笔记

[email protected]

Contents

1. 问题背景？

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

3. 如何创建响应式网站

4. 经典设计流程

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

1. 问题背景？

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

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

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

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

3. 如何创建响应式网站

• HTML

  • viewpoint 属性

    什么是视口?浏览器里去掉菜单、工具栏、浏览器自身的其他部件。简单的说就是中间的最大的窗口。 未设置viewpoint属性的网页在桌面显示器上是以全尺寸的方式渲染的。

    指明字符集 和语言 lang

    其中width=“device-width”高速浏览器以全尺寸渲染模式。initial-scale指明按照width的属性的宽度进行渲染，不放大也不缩小。user-scaleable=no使用户不可缩放。 maximum-scale=2指定最大缩放比。

  • 语义化结构标签

    WAI-ARIA, 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，指无障碍网页应用技术。

    应包含介绍性和导航性的辅助内容如logo、搜索功能和主导航栏。对应的WAI-ARIA属性是banner 。

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

    • 用例：

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

      IE支持：使用腻子(ployfill)或利刃(shiv)脚本。在站点的head标签内使用条件注释(conditional comment)连接它。

      •  网站标题使用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)表示条件。

    • 在连接时使用媒体查询 
    • 在sytle标签中使用