响应式网站

浏览器会给出 DIP(device independent pixels) ，而不是 hardware pixels。
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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

响应式图片

CSS does allow content to overflow it's container

//单开一篇

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

<img id="owl">

#owl{
    width: 640px;
    max-width: 100%;
}

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

Buttons

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

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

Media Query

<link rel="stylesheet" media="screen and (min-width: 500px)" href="yes.css")

@media screen and (min-width: 500px) and (max-width: 600px) {
    body {
        background-color: azure;
    }
}

考虑到性能，避免使用 @import （更多HTTP请求）

Flexbox

A Complete Guide to Flexbox

冒泡事件

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

一个元素嵌套在另一个元素中，而两个元素都有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

表格

No More Tables

将表头以绝对路径设置到视野外而不是使用 display:none 因为这会使用 screen reader 的用户遇到 accessibility 问题

Contained Scrolling

将表格包裹在<div class="table_container">中

@media screen and (max-width: 500px) {
    .table_container {
        width: 100%;
        overflow-x: auto;
    }
}

Responsive Data Table Roundup

截短文本

我的另一篇文章