参考

• css-tricks
• 《10步掌握CSS定位》
• 《使用viewport元标签控制布局》
• mydevice.io
• 2015移动app视觉规范
• dpi.lv
• viewportsizes.com
• resolution
• 《Height equals width with pure CSS》
• https://csstriggers.com/
• 《在 iOS 模拟器中调试 Web 页面》

Web Components

polymer

Web Gradients

CSS Gradient Animator webgradients

rem布局

• http://m.mogujie.com/
• https://segmentfault.com/a/1190000003690140

material design

• material design
• material icons

ios vs Safari

• ios 版本比例 1、2
• Safari version history
• IOS vs. Safari 版本
• IOS 版本
• MacOSX 与 Safari 版本

iPhone 3GS        - Mobile Safari 4.0.5
iPhone 4          - Mobile Safari 4.0.5
iPhone 4s         - Mobile Safari 5.1
iPhone 5 / 6.0    - Mobile Safari 6.0

iPad 1 / 3.2.2    - Mobile Safari 4.0.4
iPad 2 / 4.3.3    - Mobile Safari 5.02
iPad 2 / 5.0      - Mobile Safari 5.1
iPad 3 / 5.1      - Mobile Safari 5.1
iPad 4 / 6.0      - Mobile Safari 6.0

微信

屏幕常见尺寸

计算 DPI

比如： WVGA（800×400），3.7英寸屏幕的DPI

DPI = 对角线的像素数 / 屏幕英寸数
    = sqrt(800^2 + 480^2) / 3.7
    = sqrt(640000 + 230400) / 3.7
    = sqrt(870400) / 3.7
    = 932.952303175 / 3.7
    = 252.149271128

屏幕分类

常见手机屏幕

常见屏幕比例

关键词：dpi、ppi、dppx 、dpr = Device Pixel Ratio

~

safari 远程调试：

1. safari @ mac os:

   1. 菜单 "Safari" -> "Preferences" -> "Advanced" -> 选中最底部的 "Show Developer menu in menu bar"
   2. 有必要的时候，退出并重启 Safari

2. safari @ ios

   1. ios : 设置 -> Safari -> 高级 -> 开启 "Web 检查器"
   2. 使用 Safari 浏览网页

3. safari @ mac os: -> Develop 菜单 -> xxx's iPad -> 选择要检查的网页。

tools

• styleguide

layout

• flexboxgrid
• grd

animation

• Animated Buttons
• Original Hover Effects
• css SPINNERS
• WAIT! Animate

图片

• Imagehover.css
• HUE.css
• CSSCO

颜色

• brand-colors

笔记

• ？？？ display:table-cell 无法 float?
• display:table 垂直居中
• 《A Complete Guide to Flexbox》
• 《Flex布局新旧混合写法详解（兼容微信）》
• http://www.zhihu.com/question/22991944
• www.w3.org/TR/2009/WD-css3-flexbox-20090723/

css 规则的优先顺序？

• 说明
  • a : 选择器包含元素id的数量
  • b : 选择器中类选择器，属性选择器，伪类选择器（不保护含 :not(X) 伪类）的数量
  • c : 选择器包元素名称选择器，伪元素的数量
  • 忽略通配符选择器

示例

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

                /* a=0 b=3 c=3 -> specificity =  33 */
md-list.md-dense md-list-item > md-icon:first-child:not(.md-avatar-icon) {
    color:red;
}

                /* a=0 b=3 c=2 -> specificity =  32 */
.ks-category md-list-item > md-icon.subdir:first-child {
    color:blue;
}

<md-list class="ks-category md-dense">
   <md-list-item>
      <md-icon class="subdir" >xxx<md-icon>  <!-- 问：文本 "xxx" 是红色还是蓝色？ -->
      <md-icon class="subdir" >yyy<md-icon>
   </md-list-item>
</md-list>

参考

• css 3
• css 2
• Pseudo-classes

伪类

:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

伪元素

element::after {}
element::before {}
element::first-letter {}
element::first-line {}
element::selection {}

进度条/spin

• 《10+ Best Pure CSS Loading Spinners For Front-end Developers》