• browerhack 各种浏览器兼容性写法
• html5shiv 让不支持html5的浏览器支持html5
• 腻子 抹平浏览器的差异性
• 对不确定的元素主动检测兼容性
• 查看浏览器的兼容性情况
• npm 查看npm安装的包信息
• 在多设备上调试实现同步的效果
• http-server服务部署

• px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
• em 的值并不是固定的，会继承父级元素的字体大小，代表倍数；
• rem 的值并不是固定的，始终是基于根元素 的，也代表倍数。

em 的使用是相对于其父级的字体大小的，即倍数。浏览器的默认字体高都是 16px，未经调整的浏览器显示 1em = 16px。但是由于 em 是相对于其父级字体的倍数的，当出现有多重嵌套内容时，使用 em 分别给它们设置字体的大小往往要重新计算。比如说你在父级中声明了字体大小为 1.2em，那么在声明子元素的字体大小时设置 1em 才能和父级元素内容字体大小一致，而不是1.2em（避免 1.2*1.2=1.44em）, 因为此 em 非彼 em。

rem 的出现再也不用担心还要根据父级元素的 font-size 计算 em 值了，因为它始终是基于根元素（）的。 比如默认的 html font-size=16px，那么想设置 12px 的文字就是：12÷16=0.75(rem)

谷歌浏览器默认字体大小最小是12px,如果为了计算方便而将html根元素字体设置为10px,即html{font-size:10px;}

此时子元素使用rem时来设置字体大小以及height\width等要注意:

1. 当字体大小小于12px时浏览器一律显示12px,如p{font-size:0.9rem;}，实际浏览器将p元素内字体大小以1.2rem显示

2. 当rem设置height\width时rem和px转换比是1：12，并非1:10。原因：谷歌浏览器默认字体大小最小是12px

一般来说，如果需要统一字体大小，建议用 rem，但有些局部，相对动态需要根据父元素字体来设置大小的，会选用 em。另外还有一些比较特殊的情况，比如需要与固定像素的图片配合布局等，那就要用到 px 了。

• only screen参考文章
• 媒体查询中only not的理解

像头部导航 左右两边没有竖线 其他都用竖线隔开就可以使用这种方法实现：

header .top ul li + li { /* 从第一个li的兄弟元素开始 及第二个li开始执行该代码*/
    border-left: 1px solid #999;
    margin-left: -3px;
}

• calc的使用介绍 例子
• box-sizing和calc的比较

p{
    display: inline-block;
    width: 200px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

最实用的方法

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

 -webkit-filter: grayscale(100%); /*CSS3 grayscale滤镜图片变黑白*/
 filter: grayscale(100%);

只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

::selection{
    color:#ff0000;
}

::-moz-selection{
    color:#ff0000;
}

使用polyfill(picturefill)是浏览器兼容picture标签

• picture元素处理响应式图片
• 响应式图像之srcset和sizes属性

• editor
• icomoon
• 对svg的压缩
• 对png的压缩

• Axure中文网
• Axure英文网
• Sketch

• Flinto for Mac
• Principle

• webstorm
• webstorm PDF