【RWD】起手式：斷點、container、Viewport、max-width、%數

標準原則

• 不可以出現X軸
• 觸控高度一定要44px
• 不要太寬，不要太擠

熱門斷點

• PC:1280px / 960px
• ipad:768px
• iphone:375px

重點

外圍：width 100%
中間：container固定為max-wisth: 960px or 1280px（然後margin auto）

高度問題

區塊高度不ㄧ樣

解法：height寫死，然後等到變成單欄在height:auto

PC版header的高度height可以寫死
（header本來就不會莫名其妙多出內容）
但等到mobile變成單欄要改成height:auto

Viewport

強制讓螢幕解析度等於載具寬度

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

media

@media (max-width:375px) {
    #title {
        color: black;
    }
}

width→max-width（超好用）

.wrap {
    max-width: 900px;
    margin: 0 auto;
}

%數（會根據父元素計算）

三欄式寫法

.news li {
    width: 31.3333%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1em;
    float: left;
}

@media(max-width:780px) {
    .news li {
        width: 48%;
    }
}

@media(max-width:375px) {
    .news li {
        width: 99%;
    }
}

​