如今，互聯網流量的很大一部分來自功能不同的移動設備，因此至關重要的是，任何新網站都必須在盡可能多的設備上使用。設計和開發適用于多種屏幕和設備的網站的過程通常稱為“響應式Web設計”，有時也稱為“自適應設計”（在響應式設計中也用于指代特定方法）。
今天，是否擁有一個響應式網站的問題已不再相關；答案是明確的“是！”，甚至Google也在那些不適合移動設備的網站之后放置了那些網站。真正的問題是如何執行成功且有效的多設備策略，而又不會超出預算或錯過移動用戶體驗的重點。
任何有經驗的網頁設計師都應該精通使網站具有響應能力的技術。為了幫助您找到最適合您項目的匹配項，我們準備了一些問題和準則。在設計和開發響應式網站時，必須考慮一些重要的注意事項。
跨設備的內容策略
自適應設計不僅僅是將所有內容都適合任何屏幕尺寸。設計人員必須考慮到每種設備的使用環境及其功能。
由于移動技術的革命，網頁設計師不得不考慮眾多不同的軟件和硬件平臺。
有時，*跳過移動設備上的某些副本，使用替代副本或其他圖像資產，因為網站的導航需要在不同屏幕之間進行更改。有時，應僅在移動設備上啟用特定的內容或功能，例如“單擊以致電給我們”按鈕，基于用戶的位置提供交互或顯示所使用的特定設備的“應用程序下載”按鈕。
問：我們必須為不同的設備準備不同的內容或資產嗎？
有時是的。在某些情況下，需要進行此類更改：
- 通常情況下，對于小縱向屏幕，必須對圖像進行不同的裁切。寬高比的圖像非常適合桌面網站橫幅，但是在豎直的智能手機屏幕上幾乎無法使用。
- 如果大型演示視頻在計算機屏幕上很不錯，則可以用移動設備上的圖像和文本代替它，尤其是當您希望來自移動互聯網連接速度較慢的設備的流量時。
- 對于用戶可能不會閱讀的小屏幕設備，某些副本可能必須省略（或重寫）。
- 某些號召性用語控件可能已更改為更適合該設備；例如，計算機上的“發送消息”可能會替換為手機上的“立即呼叫”。
- 在小屏幕上，*將復雜的圖形，圖表和長表保留為鏈接的獨立頁面，而不是將其包含在頁面的內容流中。另一個想法是用不同的方式顯示相同的數據，或僅顯示最重要的部分。
- 對于不同的屏幕尺寸，應重新考慮導航，甚至應單獨設計導航。這不一定與其可視化有關，而是通常包括不同的結構，例如鏈接的平面列表而不是下拉菜單/下拉菜單，或者通過在特定設備上更復雜的菜單中顯示較少的深度。
不同屏幕上的布局優化
雖然側面放置的計算機和較大的平板電腦提供了大量的水平空間來布置網站內容，但屏幕越小，則用于并排放置的元素的空間就越小。這就是為什么智能手機上的網站通常設計為只有一列布局。這是設計響應式網站時的主要問題之一：頁面布局何時以及如何更改。
問：如何確保內容布局在不同設備上看起來不錯？您使用什么技術來實現這一目標？
應根據流行的設備尺寸，類型和環境定義一些“斷點”。這些是預定義的屏幕寬度（和較少的屏幕高度），其中頁面布局從例如三列更改為兩列，然后變為一列。當前，*的寬度斷點是：
- 1920年及以后：電視屏幕和大型臺式機顯示器
- 1280至1920：對于絕大多數筆記本電腦，在橫向模式（水平放置）下，許多現代臺式機顯示器以及大型平板電腦（通常為10英寸及以上）
- 800至1280：適用于橫向模式的較小平板電腦以及較舊或較小的顯示器
- 480至800：適用于平板電腦（縱向）（垂直放置）和智能手機（橫向）
- 最多480：智能手機處于縱向模式
要@media在CSS代碼中使用基于屏幕大小的不同樣式，例如，僅在屏幕寬度大于480像素但小于800的設備上將段落的字體大小更改為14像素，將使用以下規則：
css @media (min-width: 480px) and (max-width: 799px) { font-size: 14px; }
另一個重要的考慮因素是將HTML代碼按照需要在移動設備上顯示的順序放置。通常，編寫干凈，結構合理且語義正確的HTML代碼對于順利實施響應式網站大有幫助。
與不同設備上的用戶界面交互
由于設備不僅屏幕大小不同，而且輸入方法也不同，因此請確保每個UI元素在每種設備類型的上下文中均按預期工作。這意味著下拉菜單對于計算機屏幕應該是可以接受的，但是在智能手機和平板電腦上，用戶希望導航方法更類似于移動應用程序上的導航方法。
問：如何確保UI正常工作并在不同設備上感覺自然？列舉一些不適用于特定設備的交互模式。
不同的設備具有不同的功能，用戶希望其設備上的網站能夠以與其設備上的應用類似的方式運行。
臺式機和移動用戶界面之間最重要的區別是，臺式機通常由鼠標或觸控板以及快速且易于使用的鍵盤控制，而移動設備依賴于無指針的觸摸屏以及帶有經常使用起來很麻煩。另一個考慮因素是沒有指針的設備還缺少懸停狀態，該狀態經常用于觸發網頁上的某些操作。指針和觸摸屏這兩種輸入法也使不同的操作更容易（更自然）或更困難和更慢。例如，在屏幕上移動項目或在觸摸屏上拖動更容易（因此，在桌面上避免了拖動），而使用鼠標指針單擊較小的控件則容易得多（因此，UI控件應在觸摸屏上變大）。
基于屏幕尺寸的資產優化
即使可以將相同的資產提供給不同的設備，也不意味著相同的圖像大小或視頻質量將是*的。為了減少加載時間，尤其是在移動Internet連接上，Web設計人員應注意它們為不同設備提供的資產。
例如，一張1920像素寬，400 KB的背景照片非常適合臺式機，但在智能手機上會過分使用（明智的選擇），而下載速度較慢（明智的選擇文件大小）。因此，*使用較小尺寸的圖像，如果用戶的屏幕足夠小，則可以使用該圖像。而且，您不希望用戶僅下載一個版本的用戶下載兩個版本。
問：無論屏幕大小如何，您是否提供相同的資產都重要嗎？圖像和背景在這方面有什么區別嗎？
至少對于較大的圖像文件而言，為移動設備和臺式機屏幕使用單獨的版本非常重要。可以向移動用戶提供同一圖像的較小副本，以減少加載時間。但是，對于移動設備，不應大幅減小圖像尺寸（如果可行），因為它們的屏幕密度通常比臺式機顯示器高得多。應根據具體情況做出決定，因為某些圖像的大小可以減小，而不會產生太大的視覺影響，而對于另一些圖像，保留其細節很重要。
從技術上講，背景圖像（在CSS中定義）和內容圖像（在HTML中作為圖像文件包含）之間存在很大差異。可以輕松地在CSS中的不同媒體查詢中分別設置背景，因此只有在用戶屏幕與特定查詢匹配時才提供每個版本。其他的則不是從Web服務器下載的。對于HTML中的圖像，仍然沒有內置的，有效的和受良好支持的方法來根據用戶屏幕大小提供不同的文件。可以使用不同的技術來實現此目的，例如通過使用模擬即將到來的<picture>元素的行為的polyfill腳本，或具有自己約定的其他腳本，或使用CSS背景顯示圖像。
通常，應避免使用CSS方法，因為CSS圖像背景沒有任何語義含義，被視為修飾。此外，它缺乏可訪問性，因為無法用標記具有的title和alt屬性來描述<img>。
