响应式开发学习笔记

这是第一次写笔记，以后要常写，不然怎么走向人生巅峰…

先来个总结

这是学习慕课网上响应式开发实战课程过程中记录笔记的整理。

所谓响应式开发，基本套路就是，结构样式分离，然后使用CSS的媒体查询，应对不同设备应用不同的样式，以达到较好的显示效果！

viewport

1. 布局视口：相当于PS中的画布（个人理解）
2. 可视视口：缩放操作的就是可视视口。
3. 理想视口：不需要缩放就能看到很好的效果。比如当布局视口等于可视视口的时候。

项目文件中特殊文件

1. robots.txt 爬虫协议文件，给机器读的，告诉搜索引擎哪些内容可以被抓取，哪些文件不能被抓取。
2. humans.txt 这个文件由开发者编写，用来记录开发者信息，是给人读的，可以从该文件中了解整个项目的开发团队的构成等信息。
3. .editorconfig 用于团队开发时规范代码风格。
4. LICENSE.txt 记录许可协议。
5. README.md 一般用来描述项目或系统使用说明等信息。
6. CHANGELOG.md 更新日志。

em && rem相对长度单位

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

2. rem 相对参照物为根元素，且固定不变，当没有设置font-size时，浏览器会有默认的rem设置 1rem = 16px.

   因为rem相对参照物固定不变，易于控制，所以推荐使用rem;
   然后设置<html/>元素的font-size = 62.5% ; 
   这时 1rem = 10px (10 / 16 * 100% = 62.5% );
   

css隐藏字符

.hide-text {
	font: 0/0 a;			/* 字体大小/行高 字体名称. 一般并不会存在a字体，此处只为通过css validation */
	color: transparent;
}

清除浮动几种方式

1. 在浮动元素结束后增加空div标签< div style=”clear: both” />
2. 给浮动元素容器增加overflow: auto 或 overflow: hidden.
3. 让浮动元素的容器也浮动.

比较好的方法是通过增加伪元素来清除浮动：

.clearfix:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;		/* 占用空间的不可见 */
}

优雅的方法：

.clearfix:before,
.clearfix:after {
	content: '';
	display: table;
}

.clearfix:after {
	clear: both;
}

一些css属性

1. text-overflow: ellipsis 超出文字用…修剪
2. white-space: nowrap 段落中的文本不进行换行
3. font-size: 0 可以用来取出间隙，避免无故换行（比如：ul>li做的导航栏，因为代码中存在换行，换行符会被当做字体处理）

使用媒体查询时，长度单位的选择

使用媒体查询的时，因为媒体查询的优先级比较高，所以，无论使用的是rem还是em，此时相对参照的不是的设置，而是浏览器的默认设置，即 1rem = 16px；rem兼容性不是很好，所以这里更适合用em。

实现响应式图片的几种方式

1. js或服务端（cookies）
2. srcset
3. srcset 配合 sizes
4. picture
5. svg

几个好用的工具

1. bowser-sync 代码更改后自动刷新界面，且能够多个窗口同步滚动，适合多设备测试时使用。
2. http-server 简单易用的本地web服务器搭建工具。
3. Grunt 自动化构建工具
4. Gulp 自动化构建工具
5. webpack 静态资源打包工具

最后，一个每次用到的时候都记不住的git命令

将本地仓库与远程仓库关联

git remote add origin git@xx

1. 如果远程仓库是空的：git push -u origin master (-u 参数可以将本地分支一并关联到远程仓库)

2. 如果远程仓库不为空，比如有个README.md 此时push命令会出错, 解决办法就是先rebase一下 git pull origin master –rebase 然后 git push origin master

---

噼里啪啦痛痛快快一篇总结。