響應(yīng)式Web設(shè)計(jì):HTML5和CSS3實(shí)戰(zhàn)(第2版)
第一章 響應(yīng)式Web設(shè)計(jì)基礎(chǔ)
1.1 定義需求
- 響應(yīng)式設(shè)計(jì)可以讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備和屏幕
- 并不依賴服務(wù)端或后端方案
1.2 響應(yīng)式設(shè)計(jì)
- 定義：網(wǎng)頁(yè)內(nèi)容會(huì)隨著訪問(wèn)它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式
- 思路：先為小屏幕設(shè)計(jì)內(nèi)容、樣式，然后再向大屏幕擴(kuò)展
1.3 瀏覽器支持
- 先寫一個(gè)較輕量的代碼結(jié)構(gòu)，然后根據(jù)所需的體驗(yàn)針對(duì)能力更強(qiáng)的瀏覽器進(jìn)行擴(kuò)展
- 視覺(jué)
- 功能
- 漸進(jìn)增強(qiáng)
- 從最基本體驗(yàn)開始，逐步擴(kuò)充
- 平穩(wěn)退化
- 先做出大而全的版本，然后再針對(duì)能力不足的平臺(tái)尋找后備方案
- 提前確定主要支持平臺(tái)很重要
- 推薦網(wǎng)站：www.caniuse.com
1.4 響應(yīng)式例子
1.4.1 html
- 默認(rèn)情況下網(wǎng)頁(yè)布局上彈性的，縮放瀏覽器窗口，文字會(huì)自動(dòng)重排
- iphone會(huì)將網(wǎng)頁(yè)按980px寬度渲染，然后縮放到視口（viewport）中
<meta name="viewport" content="width = device-width">
1.4.2 picture
- 圖片寬度按容器寬度自動(dòng)縮放
img {
max-width: 100%;
}
- width:100%
- 會(huì)導(dǎo)致圖片永遠(yuǎn)都占滿容器，不考慮圖片本身寬度
1.4.3 媒體查詢
- 斷點(diǎn)應(yīng)該由內(nèi)容和設(shè)計(jì)本身決定， 不應(yīng)該由流行的主流設(shè)備寬高設(shè)置
- 表現(xiàn)形式：
- @media screen and (max-width: 50em);
- 只適合寬度在50em以下的情況下
- 以最小屏幕為起點(diǎn)，再根據(jù)需求漸進(jìn)擴(kuò)展視覺(jué)和功能
