響應式網站

瀏覽器會給出 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;
    }
}

More

Responsive Data Table Roundup

截短文本

個人另外一篇文章