响应式网站

2016-05-11 09:41:00

浏览器会给出 DIP(device independent pixels) ，而不是 hardware pixels。[br]DIP 实际上联系像素到实际的距离。不管显示器的 pixel density 是怎样，同样的 DIP 会占据同样的空间。

The idea being that a device independent pixel will take up the same amount of space on a display regardless of the pixel density of the display.

设置 Viewport

width=device-width width属性控制视口的宽度设为 device-width 这一特殊值来指代比例为 100% 时屏幕宽度的 CSS 像素数值。[br]initial-scale=1 initial-scale 属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale 及 user-scalable 属性控制允许用户以怎样的方式放大或缩小页面。

响应式图片

CSS does allow content to overflow it's container

//单开一篇

quiz: 判断此图片元素是否是响应式的

owl{

width: 640px;max-width: 100%;

}
An: 是， max-width 属性实际上会覆盖 width 属性

Buttons

button 的大小应该有 48px, 有时候可以小一些，但至少要有 40px[br]同样，两个 button 之间的间隔应有 48px[br]下面是个好的例子：

button {
min-width: 48px;
min-height: 48px;
}

Media Query

@media screen and (min-width: 500px) and (max-width: 600px) {
body {
background-color: azure;
}
}
考虑到性能，避免使用 @import （更多HTTP请求）

Flexbox

A Complete Guide to Flexbox

冒泡事件

element1

-------------------------

-----------------------------------
一个元素嵌套在另一个元素中，而两个元素都有onClick事件处理函数(event handler)。那么点击element2，哪个事件会先触发？

捕获型事件

当你使用捕获型事件时

| |

---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 \ / | |
| ------------------------- |
| Event CAPTURING |

element1的事件处理函数首先被触发，element2的事件处理函数最后被触发

冒泡型事件

当你使用冒泡型事件时

/ \

---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |

element2 的处理函数首先被触发，element1其次

W3C model

任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段

             | |  / \

-----------------| |--| |-----------------
| element1 | | | | |
| -------------| |--| |----------- |
| |element2 \ / | | | |
| -------------------------------- |
| W3C event model |

通过addEventListener()方法的最后一个参数可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数

element1.addEventListener('click',doSomething2,true)

element2.addEventListener('click',doSomething,false)
如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。

e.stopPropagation()
可停止传播

Setting document–wide event handlers is necessary in drag–and–drop scripts. Typically a mousedown event on a layer selects this layer and makes it respond to the mousemove event. Though the mousedown is usually registered on the layer to avoid browser bugs, both other event handlers must be document–wide.

//没懂

参考: Event order