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

先来个总结

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

所谓响应式开发，基本套路就是，结构样式分离，然后使用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隐藏字符

1
2
3
4

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

清除浮动几种方式

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

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

1
2
3
4
5
6
7

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

优雅的方法：

1
2
3
4
5
6
7
8
9

.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命令

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

1

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

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

是不是很有极客范儿, 我喜欢这个博客!

hexo搭建笔记

1. 安装hexo。
2. 拷贝_config.yml文件，这是hexo的配置文件，保存了博客首页设置、git部署路径等配置。
3. 拷贝themes文件夹下的themes/cactus-dark文件夹替换原有主题。

至此，hexo重新搭建完成，且主题、配置等和原有设置一致！
如果使用：hexo deploy 命令时出错：ERROR Deployer not found: git
解决办法：npm install hexo-deployer-git --save

2017-04-16 增加浏览量统计

1.引入卜蒜子

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

这段代码可以写在footer.ejs、header.ejs、layout.ejs, 我写在了footer.ejs文件里。

.../themes/(myThemes)/layout/_partial/footer.ejs

2.增加站点访问量

修改文件

.../themes/(myThemes)/layout/_partial/footer.ejs

添加代码

1
2
3

<span id="busuanzi_container_site_uv"> 
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

计算访问量的方法有两种：

1. 算法a：pv的方式，单个用户连续点击n篇文章，记录n次访问量。
2. 算法b：uv的方式，单个用户连续点击n篇文章，只记录1次访客数。
   我用的是uv的方式，自行选择即可。

3.添加文章访问量

修改文件

.../themes/(myThemes)/layout/_partial/post/date.ejs

添加代码

1
2
3

<span id="busuanzi_container_page_pv">
	浏览 <span id="busuanzi_value_page_pv"></span>
</span>

2017-06-03 重新搭建博客总结

1. 安装hexo

   1. $ npm install -g hexo-cli
   2. $ hexo init <folder>
   3. $ cd <folder>
   4. $ npm install

2. 使用原始文件/夹替换搭建hexo生成的初始文件/夹，包括：

   1. scaffolds (模板)
   2. source (文章原始数据，重要！)
   3. themes (主题)
   4. _config.yml (配置)

3. $ npm install hexo-deployer-git --save （执行这条命令，否则使用 hexo deploy部署时会报错.）

2018-01-17 新主题增加GitCommnet评论系统

1. themes/yilia/_config.yml 配置相应参数即可

2018-04-17 重新搭建博客简单方式

1.克隆hexo项目

1

git clone git@github.com:zhangxiaoshang/BlogBackup.git Blog

2.安装依赖

1

cnpm install

3.克隆主题

1
2
3

cd Blog
mkdir themes && cd themes
git clone git@github.com:zhangxiaoshang/hexo-theme-yilia.git yilia

4.完成

1

hexo s