【笔记】imooc -所向披靡的响应式开发

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/aSuncat/article/details/83017501

第01章

1-03 响应式网站设计的概念

一、响应式网站
1、响应式网站是一个设计理念，是多项技术的综合体。
2、设计的技术：
（1）flexible grid layout 弹性网格布局.
（2）flexible image 弹性图片
（3）media queries 媒体查询

1-06 媒体查询-1

一、css3媒体属性
1、width：视口宽度
2、height：视口高度
3、device-width:渲染表面的宽度，就是设备屏幕的宽度。
4、device-height：渲染表面的高度，就是设备屏幕的高度。
5、orientation：检查设备处于横向还是纵向。
6、aspect-ratio：基于视口宽度和高度的宽高比。
7、device-aspect-ratio：渲染表面的宽度，就是设备屏幕的宽度。
8、color：每种颜色的位数bits，如：min-color:16位，8位。
9、resolution：检测屏幕或打印机的分辨率，如min-resolution:300dpi
注：以上属性都可以添加min-或max-前缀

1-07 媒体查询-2

一、viewport视口
1、布局视口（layout viewport），默认宽度是960px，这样需要缩放页面；如果布局视口为理想视口，及手机宽度，则页面不需要缩放。
2、可视视口（visual viewport），默认宽度是手机宽度
3、理想视口（ideal viewport），理想视口就是为构建手机浏览器优化的页面添加的，添加视口标签<meta name=“viewport” content=“width=device-width”>，如果不写这句话，布局视口的宽度是厂商的默认值，如960px或980px等，如果指定该属性，布局视口成为理想视口。

第02章 如何组织项目目录结构

2-01 简述

一、项目目录结构
1、约定优于配置（convention over configuration）
约定代码结构或命名规范以减少配置数量。

2-03 有用的文件-1

1、robots.txt，给搜索引擎，机器人看的。

User-agent: *
Disallow: /admin/

2、humans.txt，保存网络建设者和其它信息
3、404.html
4、.editorConfig，不同编辑器中统一代码风格，早期webstorm可以在插件中下载EditorConfig，现在已经内嵌，不需再下载。

# editorconfig.org

root = true

[*]
charset = utf-8 // 文件保存格式
indent_size = tab
tab_width = 4
tab_style = tab
insert_final_newline = true // true:文件以空白行结尾
trim_trailing_whitespace = true // 去除换行行首的空白字符

[*.md]
trim_trailing_whitespace = false

5、.gitignore，不需要版本管理的文件

*.~ // mac操作系统生成的垃圾文件，默认隐藏
.DS_Store // mac操作系统生成的垃圾文件，默认隐藏
.idea // webstorm设置目录
node_modules // 存放了nodejs引入的模块目录
dist // 工具生成的文件发布目录
// webstorm当前页面，右击,add template，使用了哪些语言，和哪些ide，勾选上，相关的垃圾文件，就会被添加到.gitignore列表中

2-05 有用的文件-3（LICENSE.txt、README.md、CHANGELOG.md）

6、LICENSE.txt,声明或协议
7、README.md，可以参考bootstrap
（1）项目简介，使用方式、相关链接。
（2）md，markdown的简写，也就是markdown文件.
（3）webstorm的markdown编辑工具，插件下载MultiMarkDown
（4）在线编辑markdown文件：http://dillinger.io
8、CHANGELOG.md
项目每个版本的更新，说明版本号、更新内容、修复了哪些问题等。

2-06 有用的文件4（markdown）

一、webstorm新建的文件中创建html5文件模板，输入html:5 ,然后按tab就行。

第03章 开始编写html文件

3-01 开始

一、html中的lang，
1、如果是zh-CH，支持简体中文；如果是zh，支持更广泛的中文，包括简体，繁体，方言等。
2、如果lang是en，有些翻译软件就会进行翻译，如果是zh，则不会进行翻译。
二、charset
1、meta charset = "utf-8" 如果写在<title>这里含中文字符</title> 之后，在老的ie中，则会无法正确解析（①出现空白页。②出现乱码）。
2、charset要放在页面的前1024个字节内，不然是无效的。
三、http-equiv
<meta http-equiv="x-ua-compatible" content="ie=edge"> id=edge表示强制以最新的ie浏览器模式渲染页面，ie11对这个文档模式已经弃用了，ie11的支持已经比较好了。

3-02 header部分及html5新增标签简介

一、一般都用class定义样式，id一般用于js快速得区别和获取元素class，一般都用中横线分隔，id一般都使用驼峰命名法。
二、必不可少的图片使用引入，可有可无的装饰性图片可以用标签的style引入。

第04章 如何实现pc端的样式

4-01 css resets

一、用normalize.css作为基础css
1、resets.css
2、normalize.css，相对于传统resets.css，保护了有价值的默认样式，不会再有大段的继承链。

4-02 px,em,rem

一、

/**********
* 页面样式
* *********/
/*========
基本默认值
=======*/

二、没有font-size时，浏览器有个默认的em设置：1em=16px
三、rem参照物给根元素html
四、ie8或者更低版本的浏览器不支持rem，兼容性方法

p{
	font-size:16px;
	font-size:1rem;
}

五、鼠标选中的颜色

::selection{
	background-color:#b3d4fc;
	text-shadow:none;
}

4-03 清除浮动1

一、部分能共用的样式
1、样式统一

.text-center{
	text-align:center  !important;
}
.hide{
	display:none  !important;
}
.show{
	display:block !important;
}
.invisible{
	visibility:none
}
.text-hide{
	font:0/0 a;
	color:transparent;
	text-shadow:none;
	background-color:transparent;
	border:0;
}

2、.text-hide，有些图片显示了，但是需要解说文字让seo查到，或网页阅读器阅读，就可以用这个。

4-04 清除浮动2

一、flex是可以替代float的布局方式
ie8、9支持不是很好。
二、子元素浮动，父元素高度为0，这时就需要清除浮动。
三、清除浮动的4种方式
1、父元素最后增加一个标签，clear:both。会添加一个无意义的标签。

<div>
	<p style="float:left">内容1</p>
	<p style="float:left">内容2</p>
	<div style="clear:both;"></div>
</div>

2、父元素溢出隐藏

<div style="overflow:hidden"> <!--或者overflow:auto;-->
	<p class="float:left">内容1</p>
	<p style="float:left">内容2</p>
</div>

3、给父元素也添加一个浮动,父元素浮动了，如果有父元素的父元素，也需要浮动，整个页面都建立在浮动布局的基础上。
这个方法影响页面布局，不推荐使用。

<div style="flaot:left">
	<p class="float:left">内容1</p>
	<p style="float:left">内容2</p>
</div>

4、css实现，原理同方法1
（1）

.clearfix:after{
	content: "";
	display:block;
	height;0；// 隐藏content元素
	visibility:hidden; // 隐藏content元素
	clear:both; // 清除浮动
}
.clerfix{ // 兼容ie6,ie7，zoom:1触发hasLayout，才能清除浮动
	zoom:1;
}
<div class="clearfix">
	<p class="float:left">内容1</p>
	<p style="float:left">内容2</p>
</div>

（2）优化后：推荐使用该方法清除浮动

.clearfix:after,.clearfix:before{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}

clearfix:before是为了防止顶部空白崩溃（即margin-top,margin-bottom的重叠）。
四、bfc： block Formatting Context快捷格式化上下文
1、触发bfc：（1）float。（2）overflow:除了visible之外的值。（4）display:table-cell/ table-caption/ inline-block; （5）position:fixed / absolute;

4-05 页眉页脚样式

一、body的line-height:一般设置成1.5。
二、line-height:3rem在chrome中文版中并不等于line-height:30px；因为chrome中文版最小字号12px，这样3rem就等于36px;
三、中间有边线，两边无边线：即最前面的左边没有边线，最后面的右边没有边线
1、

header .top ul li{
	display:inline-block;
}
header .top ul li + li{  /*li + li 表示第一个li元素后面紧跟着的兄弟节点的li，这样的选择器不包含列表中的第一个元素*/
	border-left: 1px solid #999;
	margin-left:-3px;
}

2、margin-left:-3px如果不写，则inline-block布局的li之间会有空白，因为html页面中存在空白字符。
2种解决方法
（1）删除代码中的空白字符。
（2）父元素font-size:0;
（3）标签书写方式：

<li><a>1</a>
</li><li><a>2</a>
</li>

（4）li不闭合

<li><a>1</a>
<li><a>2</a>

（5）设置父边距，但是不是所有的margin-left都是-3px,方案不完美。
（6）css4草案中的white-space-collapsing属性可以解决此问题，但是大部分浏览器不支持。
四、css sprits把很多小图合成到大图中。

4-06 主要内容样式1

一、透明度
1、background:rgba()，背景色透明，文字不透明。
2、opacity:0.6，背景色和文字都是透明。
3、

.item{
	display:inline-block;
	width:calc(33.333333333333% - 3rem); /* padding的2个rem,margin-right有2个1.5rem,每个分到1rem，所以就是2+1=3rem。如果是box-sizing:border-box，就会是- 1rem*/
	padding:1rem;
}
.item + .item{
	margin-left: 1.5rem;
}

4-07 主要内容样式2

一、content: "最新公告：\00a0\00a0" , \000a0表示不换行的空白字符
二、-webkit-filter:grayscale(100)% ,能给图片添加一个灰色的滤镜。
三、autoprefixer在线工具能智能增加前缀:https://autoprefixer.github.io。

第05章

5-01 响应式布局调试工具

一、调试数字，按箭头键可以加1或者减1，按住shift+上下箭头，就是以10倍为单位进行改变。
二、大屏，中屏，小屏

@media only screen and (max-width: 800)
中屏幕：and (min-width:481px) and (max-width:800px)
小屏幕：and (max-width:480px)

5-04 css3选择器1

一、@media如果用rem，会有小小的兼容性的问题，可以用em.
二、div[attr=“value”], div[attr*=“value”]能选到大部分[]选择的元素。

5-05 css3选择器2

一、:nth-child(2)是第二个子元素，class为test1的元素被选中
:nth-child-of-type(2)是第二个有某种特定类型的标签子元素，class为test2的元素被选中。

<div><p></p><span class="test1"></span><span class="test2"></span></div>

5-06 样式编写1

一、webstorm的右键，选择split vertically，能对同一个文件进行分隔。
二、一般手机屏幕不小于320px.

5-08 样式书写3（底部导航及简述表格处理方式）

一、表格响应式处理方式：
1、小屏中，隐藏某些不重要的项。
2、纵向横向转置。
3、表格每一项类似于表单一样的展示。

5-09 打印样式

一、打印
1、去除背景色
2、字改成黑色
3、a链接增加下划线
4、

@media print{
	pre,blockquote{
		border:1px solid #999;
		page-break-inside: avoid; /*避免在元素内部分页：opera*/
	}
	h3{
		orphans:3; /*在元素内部发生分页时，必须在页面底部保留的最少行数。标题与文字发生分页的话，如果标题下没有3行文字，标题就到下一页*/
		windows:3; /*在元素内部发生分页时，必须在页面顶部保留的最少行数。*/
	}
	h3{
}

orphas: 3,
windows: 3 /文字发生分页时，页面底部3行/

第06章 如何实现响应式广告及响应式图片

6-01 如何实现响应式广告

一、一个好的广告滚动组件支持
1、支持不同的图片数量
2、支持响应式布局
3、具有良好的兼容性
二、怎样挑选第三方组件
1、使用人数
2、是否开源：前端库一般都是开源的。
3、文档是否齐全
4、活跃性
二、轮播插件
OwlCarousel2

6-04 如何实现响应式图片-概述1（js或服务端实现）

一、响应式图片
1、图片的排版和布局
2、根据设备大小加载不同的图片
二、如何实现响应式图片
1、js或服务端，2种方法：
（1）js：3种480，800，1600的图片尺寸，判断后引入。
（2）设备信息写入cookie，服务器端决定返回哪张图片。
2、srcset

	<img src=“img/480.png” srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w">

支持srcset的浏览器会根据分辨率，dpr，网速等选择最佳的图片。如果不设置size，默认按屏幕与图片100%的宽度来智能加载。
3、srcset配合sizes
（1）

	<img src=“img/480.png” srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" sizes="100vw">

（2）
sizes=“100vw”, 100%的视口宽度。
sizes=“50vw”, 50%的视口宽度。
（3）

	<img src=“img/480.png” srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" sizes="(min-width:800px) 800px, 100vw">

大于等于800的宽度的情况下，宽度是800px，其他时候是100%
（4）

	<img src=“img/480.png” srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" sizes="(min-width:800px) calc(100vw - 30em), 100vw">

①calc里的-左右要加个空格，
②当大于等于800px,就会按计算的宽度来显示
4、picture

<picture>
	<source media="(max-width:36em)" srcset="img/tiananmen-s.jpg 768w" />
	<source media="(orization:landscape)"  srcset="img/tiananmen-s.jpg 768w" />
	<source srcset="img/tiananmen-s.jpg 1800w" />
	<source type="image/svg+xml" />
	<img class="image" src="img/tiananmen.jpg">
</picture>

source的type有image/svg+xml, image/webp。
picture对老的浏览器和ie浏览器不支持。
5、svg
（1）在线创建svn网站：①editor.method.ac。②iconmoon.io
svg除了ie8以下浏览器不支持，其他都支持

6-09 如何实现响应式图片-响应式广告具体实现

一、、picturfill.js引入，能使浏览器支持picture
二、压缩图片网站
1、svg：iconizr.com
2、png、jpg: tinypng.com
三、图片代码

	<picture>
		<source srcset="img/ad002-l.png" media="(min-width:50em)">
		<source srcset="img/ad002-m.png" media="(min-width:30em)">
		<source srcset="img/ad002.png" alt="新年红包">
	</picture>

第07章 NODE.JS简介

7-01 Node.js简介-1

1、Node.js是一个javascript运行环境，不是一个库，也不是一个框架，也不是一个js应用。
2、之前js运行在浏览器上，现在可以运行在Node.js。
3、Node.js是基于chrome v8引擎的javascript运行环境。
4、chrome v8引擎独立于浏览器，因为一出生就被chrome拿来用，所以是chrome v8。可以将js代码解析成机器码。

7-02 Node.js简介-2（npm 使用上）

一、npm下载
1、node install jquery：前缀+命令+包名
包名是区分大小写的，最好是使用小写。
2、package.json：里面有依赖的信息

7-03 Node.js简介-3(npm 使用下)

一、package.json里的依赖：
1、“^1.7.4”: 大版本相同，其他可以不同，1.8.5，1.9.3都可以，2.7.4不行
2、"~1.7.4"，1.7.5，1.7.8都可以，1.9.4不行
3、"~1.7"， 1.8，1.9都可以，2.7不行
二、安装全局包
npm install jquery -g
三、写入package.json
1、写到dev-dependencies（开发环境）中：npm install jquery --save-dev
2、写到dependencies（生产环境）中:npm install jquery --save
3、开发环境的包在开发环境和生产环境都可以使用。
四、卸载package.json里的应用
1、npm uninstall jquery --save-dev
2、npm uninstall jquery --save
五、更新某些包
1、npm update jquery // 更新jquery包
2、npm update // 更新所有包
六、i 是install的简写，安装的时候可以直接用简写。npm i jquery --save

7-04 nodejs 启动server 服务

一、http-server
1、sudo npm i http-server -g
2、http-server src
3、 http-server srcc -p 8888，把端口改成8888
二、低版本ie浏览器如果要写:端口号，则需要加上协议http://，即写成http://192.168.100:8080/ ,不能写成192.168.100:8080

第08章 如何处理兼容性及在多个设备上进行调试

8-01 如何处理兼容性-桌面端如何调试-1

一、firefox的像素有进位问题，可能会导致宽度变宽。
二、safari工具栏的开发-进入响应式设计模式，就会有各种不同的设备。
三、测试ie:如果是mac，如果安装虚拟机，可以用parallels desktop控制中心，管理虚拟机。
四、ie8不支持Html5标签

8-02 如何处理兼容性

一、IEtester测试各个版本的IE浏览器
二、下载虚拟机：
1、微软官网提供了很多版本的虚拟机。
2、从 https://github.com/sdissent/ievms 下载
三、虚拟机软件：
1、VMWare
2、Paralles Desktop(mac)
3、Virtual Box(免费)

8-03 如何处理兼容性-移动端如何测试

一、自动化，跑测试用例。
1、友盟指数网站，有手机用户比例。
2、云测试：如www.testin.cn，针对app更好，html5测试没那么好。
3、推荐的虚拟机软件：www.genymotion.net, 基于virtual box,

8-04 如何处理兼容性-处理兼容性的方法

一、浏览器hack写法查询。
1、browserhacks.com,可以查询到各个浏览器hack写法
二、浏览器兼容库
1、https://github.com/aFarkas/html5shiv ，很多网站都会用的shiv，ie8及一下不支持html5标签，引入这个库，可以让老的浏览器兼容html5。引入方式：

<!--[if lt IE 9]>
	<script src=""></script>
<![endif]-->

原理：通过createElement来创建浏览器老版本支持的标签。
2、https://github.com/scottjehl/Respond, 很有名的polyfill，ie6-8不支持css3的媒体查询，可以通过引入respond这个库，来支持媒体查询的min-width, max-width.
3、https://modernizr.com， 检测程序，检测浏览器对html5,css3等的支持情况，如果支持就会添加一种类，如果不支持就添加no-同名类。
（1）点击下载，选择需要的特性，点击build, 点击copy to clipboard。
（2）项目新建js，把复制到的代码拷贝进去。
（3）js的最上面引入该js文件。
（4）样式：

.svg .logo{
	background-image:url(xxx.svg);
}
.no-svg .logo{
	background-image:url(xxx.jpg);
}

三、查询某属性在各个浏览器上的兼容性
1、https://caniuse.com

8-05 如何在多个设备上进行调试

一、浏览器同步测试工具
1、www.browsersync.com，所有设备同步滚动，同步点击，多台设备同时测试时非常有用。
2、安装
sudo npm install -g browser-sync
3、browser-sync start --server “src” --files “src/css/*.css”, server后面的src是兼容的根目录

第09章 如何打包发布

9-01 如何打包发布-1

一、压缩网站
1、https://javascript-minifier.com
在线压缩
二、打包发布
1、自动化构建工具：grunt、gulp（gulp与grunt更完善）
2、静态资源打包工具：webpcak
3、gulp:把每个文档当成一个流，进行流式操作。
4、gulp安装，开发依赖项，生产环境不需要
（1）npm init
（2）responsiveweb
（3)项目下就会出现一个package.json的文件，里面会有一些依赖项。
（4)安装：sudo npm install gulp --save-dev
（5）安装完毕后package.json里就有一个dependencies-dev里有个gulp
（6）gulp -v
（7）全局安装gulp后，当前项目也还需要再安装一下gulp，不然gulp可能不能正常使用。
（8）目录下新建一个gulpfile.js文件，因为gulp所有任务，需要定义在这个文件中。
（9）首先依赖加载项，定义一个任务，
（10) sudo npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev
多个任务之间用空格隔开。
（11）gulp ，执行gulp默认任务。

9-02 如何打包发布-2

一、/*! 中 的* 后有！就不会被压缩打包

9-03 如何打包发布-3

一、插件
1、自动打包：gulp-watch插件（监听文件的改变，自动改变任务）
2、https://github.com/contra/gulp-concat ，将多个文件合并成一个文件
3、https://github.com/mahnunchik/gulp-responsive，生成响应式图片的插件
4、npm输入gulp-，就能搜到gulp所有插件。
5、模块化处理，是webpack的强项。
6、gul可以对前端进行优化。

第10章 课程扩展1-选择一个趁手的ide

10-01 webstorm的基本操作

一、webstorm
1、ide:集成开发环境，编辑器。
2、a{click me} ,自动补全文字<a>click me</a>
3、lorem补全文字，
lorem10 就会生成10个没有意义的单词。
4、m10-20生成margin:10px 20px 。
5、setting - emmet - css - auto insert css vendor prefixs, 相应属性后面的勾打上，能为属性自动添加前缀
bdrs:10生成-webkit-border-radius：10px; border-radius:10px 等。
6、webstorm搜索keymap，能选择eclipse, visual studio等的快捷键。
7、在标签上按住f1，就会给出标签相应的描述。
8、让某段标签被其他标签包裹
①选中<p>被包裹</p>
②按住command + alt + t，
③选择surround with in html/jsp
④输入需要的标签div，就得到<div><p>被包裹</p></div>
9、command + shift + v， 双击在历史剪切板中选择文字。
10、command + alt + enter, 在上面增加一行。
shift + enter, 在下面增加一行。
11、整行选择 alt + 上下箭头（aSuncat:我电脑上无效)
12、command + shift + +或者-，能让代码全部折叠或展开
13、alt + shift + 上下箭头，整行移动代码
14、command + shift + m, 找到标签的开头或结尾，快速找到匹配的大括号
15、command + alt + 左右箭头，前进或后退，回到上次光标定位的位置。
16、command + shift + 空格，上次编辑的地方（aSuncat：无效)
17、command + e ,上次使用的文件
18、command + b，快速打开光标处的类或方法
19、command + alt + b, Go to implementation(s) 跳转方法实现处
20、css颜色选择的色块上点击，打开色轮/色板修改颜色
21、shift + f6 标签,变量重命名，变量引用到的地方都会改变
22、f2，定位到错误的地方（标红色下划线的地方)，alt + enter，就会出现对错误地方的修改建议。

10-11 流行的响应式框架简介

一、bootstrap
foundation
semantic UI，样式比其他的库丰富
pureCSS
二、使用框架的缺点
1、体积大而重，使用起来不方便。

第11章 聊聊原型设计和切图

11-01 axure

一、原型设计工具
1、axure
2、mockup
二、axure
1、可以去下载axure库，安卓的material design
2、master页面，模板页面，如果每个页面都有头尾，这时候把头尾放在master就行了。
3、（1)可生成Html文件预览，pushlish-preview,
（2)生成html文件，publish-generate html files
4、动态面板，根据条件显示或者隐藏
三、sketch（mac中)
1、可以做原型设计，也可以做ui设计
2、主要针对矢量图，ps主要针对位图
四、切图
1、ps
（1)切图：切片- 存储为web格式

11-04 交互设计

一、交互设计
1、flinto中文网，交互原型设计
2、principleForMac.com（mac)，可以导成mp4,gif。