面試題（二）—— 響應式設計

一、什麼是響應式設計

• 是一種網站或應用程序設計方法
• 頁面的佈局、內容、以及功能在不同的設備和屏幕尺寸下都能夠自動適應
• 確保用戶無論在何種設備上都能夠獲得一致且友好的體驗

二、如何實現響應式設計

1、流式佈局

使用百分比、em或rem等相對單位定義頁面的寬度和其他尺寸，元素隨着瀏覽器窗口大小的變化而自動調整。

2、媒體查詢

通過使用媒體查詢，可以根據設備的特性（如屏幕寬度、設備類型等）應用不同的樣式

@media 媒體類型 and (媒體特性) {
    /* 在此處定義針對特定媒體類型和特性的樣式規則 */
}

• 媒體類型：all(所有設備), screen(屏幕設備), print(打印設備), speech(語音合成器)
• 媒體特性：width, height, aspect-ratio, orientation(方向), orientation(分辨率), pointer(設備是否有鼠標), hover(是否支持hover), color(顏色位數)

例子：

@media screen and (max-width: 768px) {
    /* 在屏幕寬度小於或等於768px時應用的樣式 */
}

@media (orientation: portrait) {
    /* 在縱向方向時應用的樣式 */
}

@media screen and (min-resolution: 300dpi) {
    /* 在分辨率大於或等於300dpi時應用的樣式 */
}

@media (hover: hover) {
    /* 在設備支持懸停效果時應用的樣式 */
}

3、彈性圖片和媒體

使用max-width屬性或百分比來設置圖片和媒體的大小

4、Flexbox和Grid佈局

5、漸進增強

從小屏幕設備開始設計和開發，逐漸增加對大屏幕設備的支持

三、總結

頁面顯示正確是前端的基礎工作，爲了實現多種設備的一致良好體驗，需要結合多種方法。若是不同設備上樣式差別較多，PC 端和 mobile 端使用兩套代碼也是常見的一種解決方式。