响应式开发

响应式开发

响应式网站设计 -----Ethan Marcotte

第一章

响应式网站设计的三大技术成分

• 流动网格
• 弹性图片
• 媒介查询

响应式网站的优点

• 减少工作量
  1. 网站、设计、代码、内容只需要一份
  2. 多处来的工作量只是js脚本，CSS样式的一些改动
• 节省时间
• 每个设备都能得到正确的设计
• 搜索优化

响应式网站的缺点

• 加载更多的样式和资源
• 设计比较难精确定位和控制
• 老版本浏览器兼容

媒体查询

CSS3

@media all and (min-width:800px)and (orientation:landscape){
    ...
}

媒体查询中的逻辑

@media not all and (monochrome) {...};
与下面这个是等价的
@media not (all and (monochrome)) {...};

only：防止老旧浏览器，不支持带媒体属性的查询，而应用到给第的样式。
当针对某一设备应用媒体查询时，最好不要省略only，除非你不想兼容老浏览器。

CSS3媒体属性简介

• width：视口宽度
• height： 视口高度
• device-width：渲染表面的宽度，就是设备屏幕的宽度
• device-height：渲染表面的高度，就是设备屏幕的高度
• orientation：检查设备处于横向还是纵向
• aspect-ratio：基于视口宽度和高度的宽高比。width/height，如：16/9，4/3
• devide-aspect-ratio：渲染表面的宽度，就是设备屏幕的宽度
• color：每种颜色的位置bits，如：min-color：16位，8位

viewport 视口

视口宽度和设备宽度

针对于手机浏览器，存在有是那个视口的概念

• 布局视口
• 可视视口
• 理想视口

理想视口就是为构建手机浏览器优化的页面而添加的
引入理想视口

布局视口的宽度和可视视口的宽度一致，那么这个视口就称为理想视口

响应式网站的设计实践原则

1. progressive enhancement 渐进增强：首先为网站设计一个基础的功能，然后再考虑了各浏览器的兼容问题之后，在逐步去加强网站的功能
2. graceful degradation 优雅降级：与渐进增强相反

建议采用优雅降级的原则

屏幕类型	大小(px)
小屏幕	0-480
中屏幕	481-800
大屏幕	801-1400
巨屏幕	1400+

断点的设置
断点就是媒体查询中的临界点
原则：针对屏幕的大小进行设置断点

屏幕类型	大小(px)
小屏幕	0-480
中屏幕	481-800
大屏幕	801-1400
巨屏幕	1400+

第二章

如何组织项目目录结构

• 约定优于配置（convention over configuration）
• 约定代码结构或命名规范

目录结构

1. 创建项目的根文件夹
2. 将所有的与项目相关的源代码均放入src文件夹中
   • 建立项目入口首页：index.html
   • 分别建立三个子文件夹css、js、img
   • 在js文件夹中建立一个vendor文件夹，用于存放引用的第三方库
3. doc文件夹用于放入项目相关的设计文档，原型
4. dist文件夹用于放入处理后的发布文件
5. test用于处理测试文件
6. .editorconfig 用于统一代码风格
7. .gitignore 存放不需要添加到版本控制的文件
8. LICENSE.txt 包含版权申明和遵循的协议
9. README.md 项目简介、使用方式、相关链接
10. CHANGELOG.txt 项目每个版本的更新。说明了版本号、更新内容、修复的问题

在src目录下进行细分

1. 建立项目入口首页：index.html
2. 分别建立三个子文件夹css、js、img
3. 在js文件夹中建立一个vendor文件夹，用于存放引用的第三方库
4. 404.html自定义的错误页面
5. robots.txt 搜索引擎搜索网站时查看的第一个文件，规定在服务器上哪些文件可以被查看，哪些无法被访问
6. favicon.ico 用于网站的标志，一般为网站的图标
7. humans.txt 用于存放网站的创造者的信息

第三章

这类的网站，当浏览器中装有翻译的插件时，它会询问是否翻译。

应该尽早在head标签下面声明。否则在老版本的浏览器中，当该meta标签前面有其他字符时，浏览器可能无法正确解析。在W3C的规则中，它要求charset声明必须在页面的前1024个字节之内。

表示强制使用最新的IE浏览器模式来渲染页面

设置低版本IE浏览器的显示方式

第四章

px、em、rem

px：设备屏幕的像素

em：相对的长度单位

1. em的相对参照物是父元素的font-size
2. em具有继承的特点
3. 当没有设置font-size时，浏览器会有一个默认的em设置：1em = 16px

em的缺点：由于em参照的是父元素的font-size。每个元素的父元素尺寸不一样，可能会带来布局的混乱

rem：相对参照物是根元素html，相当于参照固定不变，所有比较好计算

在IE8及以下的浏览器不支持rem。兼容方法：在rem单位上面再多写一个px的单位就行了

p{
    font-size:16px;   //额外添加一个px的单位
    font-size:1rem;
}

一般来说，使用rem或em等单位时，需要对页面进行以下设置

font-size:62.5%; 1rem = 10px;
font-size:100%; 1rem = 16px;

将一个rem的值设置为10px有利于后期对项目的改动。

清除浮动

1. 方法1：在浮动元素的最后添加一个style属性为clear:both的div标签
   缺点：添加了一个无意义的空标签，违背了结构与表现的精髓，后期维护困难。
2. 方法2：为浮动元素添加overflow:auto/hidden都可以清除浮动。在为浮动元素添加overflow属性后，它又会回到容器中，达到撑起容器大小的效果。
3. 方法3：为浮动元素的父元素添加浮动效果。
   缺点：破坏了页面布局
4. 方法4：为浮动元素添加一个clearfix的类，然后为此类添加after伪元素，在伪元素中添加一个看不见的块状元素来清除浮动.

.clearfix:after{
       content:'.';
       display:block;
       height:0;
       clear:both;
       visibility:hidden;
}
.clearfix{
       zoom:1;  //为了IE6，7浏览器进行适应
}

在CSS中只要某个方法或熟悉值触发了BFC就能达到清除浮动的效果。
能触发BFC的属性：float、overflow、display:table-cell/table-caption/inline-block、position:fixed/absolute

5. 方法5：

 .clearfix:after,
 .clearfix:befor  //防止浏览器顶部的空白崩溃
 {
     content:' ';
     display:table; //创建匿名表格单元
 }
 .clearfix:after{
     clear:both; 
 }

第五章

如何选择媒体查询的单位

由于媒体查询不属于html，所以对于html设置基本的font-size属性不能作为媒体查询中rem的参照值。即此时的1rem=16px;此时推荐使用兼容性更好的em作为媒体查询的单位。

第六章 响应式广告图片

对于一个好的滚动广告的组件需具备以下的特性：

1. 支持不同的图片数量
2. 支持响应式布局
3. 具有良好的兼容性

如何挑选一个第三方组件

1. 使用人数
2. 是否开源
3. 文档是否齐全
4. 活跃性
5. 小巧够用轻量

挑选一个广告组件：owlcarousel2

响应式标记

• srcset
• srcser配合sizes
• picture

srcset

srcset需要配合sizes属性来使用

  //vw=viewport