响应式开发
响应式网站设计 -----Ethan Marcotte
第一章
响应式网站设计的三大技术成分
- 流动网格
- 弹性图片
- 媒介查询
响应式网站的优点
- 减少工作量
- 网站、设计、代码、内容只需要一份
- 多处来的工作量只是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 视口
视口宽度和设备宽度
针对于手机浏览器，存在有是那个视口的概念
- 布局视口
- 可视视口
- 理想视口
理想视口就是为构建手机浏览器优化的页面而添加的
引入理想视口
<meta name="viewport" content="width=device-width"/>
布局视口的宽度和可视视口的宽度一致，那么这个视口就称为理想视口
响应式网站的设计实践原则
- progressive enhancement 渐进增强：首先为网站设计一个基础的功能，然后再考虑了各浏览器的兼容问题之后，在逐步去加强网站的功能
- graceful degradation 优雅降级：与渐进增强相反
建议采用优雅降级的原则
| 屏幕类型 | 大小(px) |
|---|---|
| 小屏幕 | 0-480 |
| 中屏幕 | 481-800 |
| 大屏幕 | 801-1400 |
| 巨屏幕 | 1400+ |
断点的设置
断点就是媒体查询中的临界点
原则：针对屏幕的大小进行设置断点
| 屏幕类型 | 大小(px) |
|---|---|
| 小屏幕 | 0-480 |
| 中屏幕 | 481-800 |
| 大屏幕 | 801-1400 |
| 巨屏幕 | 1400+ |
第二章
如何组织项目目录结构
- 约定优于配置（convention over configuration）
- 约定代码结构或命名规范
目录结构
- 创建项目的根文件夹
- 将所有的与项目相关的源代码均放入src文件夹中
- 建立项目入口首页：index.html
- 分别建立三个子文件夹css、js、img
- 在js文件夹中建立一个vendor文件夹，用于存放引用的第三方库
- doc文件夹用于放入项目相关的设计文档，原型
- dist文件夹用于放入处理后的发布文件
- test用于处理测试文件
- .editorconfig 用于统一代码风格
- .gitignore 存放不需要添加到版本控制的文件
- LICENSE.txt 包含版权申明和遵循的协议
- README.md 项目简介、使用方式、相关链接
- CHANGELOG.txt 项目每个版本的更新。说明了版本号、更新内容、修复的问题
在src目录下进行细分
- 建立项目入口首页：index.html
- 分别建立三个子文件夹css、js、img
- 在js文件夹中建立一个vendor文件夹，用于存放引用的第三方库
- 404.html自定义的错误页面
- robots.txt 搜索引擎搜索网站时查看的第一个文件，规定在服务器上哪些文件可以被查看，哪些无法被访问
- favicon.ico 用于网站的标志，一般为网站的图标
- humans.txt 用于存放网站的创造者的信息
第三章
<html lang="en">这类的网站，当浏览器中装有翻译的插件时，它会询问是否翻译。
<meta charset="UTF-8">应该尽早在head标签下面声明。否则在老版本的浏览器中，当该meta标签前面有其他字符时，浏览器可能无法正确解析。在W3C的规则中，它要求charset声明必须在页面的前1024个字节之内。
<meta http-equiv="X-UA-Compatible" content="ie=edge">表示强制使用最新的IE浏览器模式来渲染页面
<!--[if lte IE 8]>
<p class="browserupgrade">您的浏览器版本过久需要升级，请点击<a href="#">这里</a></p>
<![endif]-->
设置低版本IE浏览器的显示方式
第四章
px、em、rem
px：设备屏幕的像素
em：相对的长度单位
- em的相对参照物是父元素的font-size
- em具有继承的特点
- 当没有设置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：在浮动元素的最后添加一个style属性为clear:both的div标签
缺点：添加了一个无意义的空标签，违背了结构与表现的精髓，后期维护困难。 - 方法2：为浮动元素添加overflow:auto/hidden都可以清除浮动。在为浮动元素添加overflow属性后，它又会回到容器中，达到撑起容器大小的效果。
-
方法3：为浮动元素的父元素添加浮动效果。
缺点：破坏了页面布局 - 方法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：
.clearfix:after,
.clearfix:befor //防止浏览器顶部的空白崩溃
{
content:' ';
display:table; //创建匿名表格单元
}
.clearfix:after{
clear:both;
}
第五章
如何选择媒体查询的单位
由于媒体查询不属于html，所以对于html设置基本的font-size属性不能作为媒体查询中rem的参照值。即此时的1rem=16px;此时推荐使用兼容性更好的em作为媒体查询的单位。
第六章 响应式广告图片
对于一个好的滚动广告的组件需具备以下的特性：
- 支持不同的图片数量
- 支持响应式布局
- 具有良好的兼容性
如何挑选一个第三方组件
- 使用人数
- 是否开源
- 文档是否齐全
- 活跃性
- 小巧够用轻量
挑选一个广告组件：owlcarousel2
响应式标记
- srcset
- srcser配合sizes
- picture
srcset
<img class="image" src="img/480.png"
scrset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w">
srcset需要配合sizes属性来使用
<img class="image" src="img/480.png"
scrset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w"
sizes="(min-width:800px 800px,100vm)"> //vw=viewport
