靠实战进阿里我的实战课《所向披靡的响应式开发》学习心得@慕课网原创_慕课网

这几天学习了慕课网的实战课程——所向披靡的响应式开发，跟着姜维老师学到了很多，写篇手记将涉及的主要知识点记录下来，以便日后温故。
特别说明：1.文章只是**简单的记录**，如果你对其中的某些内容感兴趣或者是一名前端的初学者，可以去购买这节实战课程[课程地址][1]，相信你会有很大的收获；2.文章只是记录了本人学到的部分知识点，并不代表课程本身的重点，课程的重点可参照课程的目录[课程目录地址][2]

多屏时代注定了响应式开发是被迫切需要的，下面来简单说一下响应式网站的优点 1.减少工作量 ①：网站、设计、代码、内容都只需要一份代码 ②：多出来的工作量只是JS脚本、CSS样式做一些改动；2.节省时间；3.每个设备都能得到正确的设计；4.搜索优化（谷歌提出了对响应式搜索的优化，爬虫可以更有效的搜索到网站内容）；5.更好的用户体验；6.更方便的用户来源体验。响应式的网站可以在任何类型的设备和任何尺寸的屏幕上，从手机到平板到大屏显示器等等，都可以轻松的浏览和使用。
响应式网站是一个设计理念，它是多项技术的综合体。包含以下三大特征： 1. 弹性网格布局(flexible grid layout)；2. 弹性图片(flexible image)；3. 媒体查询(media queries)。
响应式网站设计实践原则 1.progressive enhancement 渐进增强 2.graceful degradation 优雅降级

一、目录结构

根目录下要建立：

LICENSE.txt ：相关协议；
README.md ：项目简介、使用方式、相关链接；
CHANGLOG.md ：项目每个版本的更新，说明版本号、更新内容、修复了哪些问题等；
humans.txt ：这是一个普通文本文件，包含了参加该网站创建人员的信息，如团队成员、感谢和站点的技术信息。通过该文本文件，我们可以快速了解该网站背后的团队信息以及他们的故事http://www.humanstxt.org.cn/
robots.txt ：搜索引擎首先访问的，网络爬虫按照其内容规定抓取(可选)；
favicon.ico ：网页title前的小图标
.gitignore ：src文件夹下.gitignore 版本管理，告诉git不需要版本管理的文件，如操作系统生成的、操作日志等。
.editorconfig ：src文件夹下.editorconfig文件包含代码格式、缩进规则、换行规则等。

二、viewport视口

viewport视口：PC端一般只有一个视口概念，即屏幕显示视口；移动端则有三个视口概念：
1.布局视口(layout viewport)：虚拟的将PC的视口在手机上布局出来；
2.可视视口(visual viewport)：用户看见的视口，布局视口的宽度不变，可视视口的宽度在随着用户的缩放而发生变化；
3.理想视口（ideal viewport）：布局视口在一个设备上的最佳尺寸，便于浏览器浏览阅读等最佳宽度，用户不需要缩放等就可以获得好的体验。

三、markdown编写

markdown编写语法：(http://dillinger.io/ markdown文件在线编写)
#  - or *    1.
>
[]()
![]()
*斜体*
**粗体**
***粗体加斜体***
1234
---:---:---::---
aaacccbbbnnn
ccceeetttyyy
``
```html   ```

注意：如果你是以前没接触过的初学者，这些内容你可能看不懂。可以网上查一下

四、webstorm快捷键

ctrl+alt+t              标签环绕
ctrl+shift+v            剪辑版
ctrl+alt+enter          在上边添加一行
ctrl+shift+enter        在下边添加一行
ctrl++/-                折叠代码
ctrl+shift++/-          折叠全部代码
alt+shift+/           上下移动整行代码
Alt + Enter             把陌生单词拼写加入字典
ctrl+alt+/右           返回上一次光标定位的地方
ctrl+e                  查看最近使用的文件
ctrl+shift+退格键       找到上一次编辑的地方
shift/F1                查看图片
F2                      定位错误或者警告
Ctrl +Alt + L           格式化代码
ctrl+[/]                移动光标到代码块开始或结束处
ctrl+shift+alt+t        重构名称
ctrl+shift+u            切换大小写
# . []  div#id.class[data-] +tab
lorem100 +tab        自动填充
a{内容} +tab
ul>li.item*5 +tab
ul>li.item$*5 +tab
html:5 +tab
link:css +tab
script:src +tab
form:get +tab

注意：本地webstorm配置不同快捷键也可能不同，具体可以查看自己本地设置

webstorm emmit插件，分为以下几种类型：

#嵌套
> +  ^  * () 

#属性
#  .  []  

#数字不全
$ 

#文本
{}  lorem

五、一些小知识点

HTML:5新标签：
<section></section>:可表示页面里面的任何区域；
<article></article>:表示页面的一小部分，像特殊的section,比如广告，一段小文章之类的；
<b></b>：表示要注意了，不表示强调；
<em></em>：表示强调；
<i></i>：表示不同的语态，语气
display:inline-block使页面元素产生空隙解决方法：
1、删除所有换行符制表符；2、设置父元素的font-size:0;（有副作用）
3、每个闭合标签写在后一个标签的开始前面；4、标签不闭合，浏览器会自动补足标签；5.设置负边距；6.利用float；7.css4中的white-space-collaping属性
清楚浮动的三种方式：
1:加入空标签<div style="clear:both"></div>;
2.在父元素中使用:overflow:hidden; 或者 overflow:auto;
3.加入公用css属性
.clearfix:after{ content:""; display:table; clear:both; }
.clearfix:{zoom:1}
也可以这样写：
.clearfix:after, .clearfix:before{ content:""; display:table; }
.clearfix:after{ clear:both; }
防止浏览器上部的崩溃，maring-bottom 和margin-top的叠加。
原理是触发BFC
bfc (BlockFormatContext)块级格式化上下文只要方法触发了bfc就可以清除浮动（闭合浮动预防高度塌陷）
float(除外none)，overflow(除外visible),
display:table-cell/table-caption/inline-block,position:fixed/absolute等
单位em与rem
em是以父元素的font-size为参照,font-size:62.5%时 1rem=10px(10/16*100%)
rem是以根元素html的font-size为参照，font-size:100%时 1rem=16px
使用相邻兄弟选择器(+)可以方便的设置边框分割
通过这种方式
.feature .item + .itme 可以给多个元素中的非第一个元素增加margin-left或者border-right:
li +li{
border-left:1px solid #999;
margin-left:-3px;//去除inline-block的3px间距（换行符或空白符造成的）
}
将图片变成灰色，使用filter: grayscale(100%); -webkit-filter: grayscale(100%); /针对Chrome浏览器/
文字不换后，超出的文字截断，在末尾显示...
.notice a:first-child{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
其他
按照惯例class采用中横杠命名，id采用驼峰命名。
css重置样式用normalize.css
背景颜色#f7f7f7,color:#222
::selection{} 更改选中文字样式
Calc( 180vw– 30em)
gt大于 lt小于 gte大于等于 lte小于等于
:before{
Content:’最新公告：\00a0\00a0’;//在content中增加空格的方法
}
$('.login').animate({right:-180,opacity:0},400,function(){ $(this).css('display','none');

六、课程中提到的一些工具或连接

http://gs.statcounter.com/ 可以按照国家来划分,浏览器使用率
http://caniuse.com/usage-table 浏览器使用统计, 面向世界
http://necolas.github.io/normalize.css/ 在保证各浏览器呈现一致的情况下，保留了各标签元素原有的特点
http://autoprefixer.github.io/ 自动补全各游览器前缀css代码
http://editor.method.ac/ 在线绘制SVG
https://icomoon.io/ 在线绘制SVG
http://dillinger.io/ markdown 文件在线编写
https://tinypng.com/ 图片压png
http://caniuse.com/ 查询属性、标签兼容性
http://www.genymotion.net/ 最快的安卓模拟器
http://owlcarousel.owlgraphic.com/ 幻灯片插件
https://modernizr.com/ 会主动检测浏览器对css3、HTML5等等功能性的支持情况。
http://browsehappy.com/ 最新游览器下载
http://www.browsersync.cn/ 各浏览器终端同步测试
http://browserhacks.com/ 各浏览器hack写法查询
https://github.com/aFarkas/html5shiv 让老版本浏览器支持HTML5新标签
https://github.com/scottjehl/Respond IE6-8支持媒体查询min/max-width特性
https://modernizr.com/ 检测浏览器是否支持某特性

靠实战进阿里 我的实战课《所向披靡的响应式开发》学习心得原创

靠实战进阿里我的实战课《所向披靡的响应式开发》学习心得原创