如今，互聯(lián)網(wǎng)流量的很大一部分來自功能不同的移動設(shè)備，因此至關(guān)重要的是，任何新網(wǎng)站都必須在盡可能多的設(shè)備上使用。設(shè)計和開發(fā)適用于多種屏幕和設(shè)備的網(wǎng)站的過程通常稱為“響應式Web設(shè)計”，有時也稱為“自適應設(shè)計”（在響應式設(shè)計中也用于指代特定方法）。

今天，是否擁有一個響應式網(wǎng)站的問題已不再相關(guān)；答案是明確的“是！”，甚至Google也在那些不適合移動設(shè)備的網(wǎng)站之后放置了那些網(wǎng)站。真正的問題是如何執(zhí)行成功且有效的多設(shè)備策略，而又不會超出預算或錯過移動用戶體驗的重點。

任何有經(jīng)驗的網(wǎng)頁設(shè)計師都應該精通使網(wǎng)站具有響應能力的技術(shù)。為了幫助您找到最適合您項目的匹配項，我們準備了一些問題和準則。在設(shè)計和開發(fā)響應式網(wǎng)站時，必須考慮一些重要的注意事項。

跨設(shè)備的內(nèi)容策略

自適應設(shè)計不僅僅是將所有內(nèi)容都適合任何屏幕尺寸。設(shè)計人員必須考慮到每種設(shè)備的使用環(huán)境及其功能。

由于移動技術(shù)的革命，網(wǎng)頁設(shè)計師不得不考慮眾多不同的軟件和硬件平臺。

有時，*跳過移動設(shè)備上的某些副本，使用替代副本或其他圖像資產(chǎn)，因為網(wǎng)站的導航需要在不同屏幕之間進行更改。有時，應僅在移動設(shè)備上啟用特定的內(nèi)容或功能，例如“單擊以致電給我們”按鈕，基于用戶的位置提供交互或顯示所使用的特定設(shè)備的“應用程序下載”按鈕。

問：我們必須為不同的設(shè)備準備不同的內(nèi)容或資產(chǎn)嗎？

有時是的。在某些情況下，需要進行此類更改：

通常情況下，對于小縱向屏幕，必須對圖像進行不同的裁切。寬高比的圖像非常適合桌面網(wǎng)站橫幅，但是在豎直的智能手機屏幕上幾乎無法使用。 如果大型演示視頻在計算機屏幕上很不錯，則可以用移動設(shè)備上的圖像和文本代替它，尤其是當您希望來自移動互聯(lián)網(wǎng)連接速度較慢的設(shè)備的流量時。 對于用戶可能不會閱讀的小屏幕設(shè)備，某些副本可能必須省略（或重寫）。 某些號召性用語控件可能已更改為更適合該設(shè)備；例如，計算機上的“發(fā)送消息”可能會替換為手機上的“立即呼叫”。 在小屏幕上，*將復雜的圖形，圖表和長表保留為鏈接的獨立頁面，而不是將其包含在頁面的內(nèi)容流中。另一個想法是用不同的方式顯示相同的數(shù)據(jù)，或僅顯示最重要的部分。 對于不同的屏幕尺寸，應重新考慮導航，甚至應單獨設(shè)計導航。這不一定與其可視化有關(guān)，而是通常包括不同的結(jié)構(gòu)，例如鏈接的平面列表而不是下拉菜單/下拉菜單，或者通過在特定設(shè)備上更復雜的菜單中顯示較少的深度。

不同屏幕上的布局優(yōu)化

雖然側(cè)面放置的計算機和較大的平板電腦提供了大量的水平空間來布置網(wǎng)站內(nèi)容，但屏幕越小，則用于并排放置的元素的空間就越小。這就是為什么智能手機上的網(wǎng)站通常設(shè)計為只有一列布局。這是設(shè)計響應式網(wǎng)站時的主要問題之一：頁面布局何時以及如何更改。

問：如何確保內(nèi)容布局在不同設(shè)備上看起來不錯？您使用什么技術(shù)來實現(xiàn)這一目標？

應根據(jù)流行的設(shè)備尺寸，類型和環(huán)境定義一些“斷點”。這些是預定義的屏幕寬度（和較少的屏幕高度），其中頁面布局從例如三列更改為兩列，然后變?yōu)橐涣小．斍埃?的寬度斷點是：

1920年及以后：電視屏幕和大型臺式機顯示器 1280至1920：對于絕大多數(shù)筆記本電腦，在橫向模式（水平放置）下，許多現(xiàn)代臺式機顯示器以及大型平板電腦（通常為10英寸及以上） 800至1280：適用于橫向模式的較小平板電腦以及較舊或較小的顯示器 480至800：適用于平板電腦（縱向）（垂直放置）和智能手機（橫向） 最多480：智能手機處于縱向模式

要@media在CSS代碼中使用基于屏幕大小的不同樣式，例如，僅在屏幕寬度大于480像素但小于800的設(shè)備上將段落的字體大小更改為14像素，將使用以下規(guī)則：

css @media (min-width: 480px) and (max-width: 799px) { font-size: 14px; }

另一個重要的考慮因素是將HTML代碼按照需要在移動設(shè)備上顯示的順序放置。通常，編寫干凈，結(jié)構(gòu)合理且語義正確的HTML代碼對于順利實施響應式網(wǎng)站大有幫助。

與不同設(shè)備上的用戶界面交互

由于設(shè)備不僅屏幕大小不同，而且輸入方法也不同，因此請確保每個UI元素在每種設(shè)備類型的上下文中均按預期工作。這意味著下拉菜單對于計算機屏幕應該是可以接受的，但是在智能手機和平板電腦上，用戶希望導航方法更類似于移動應用程序上的導航方法。

問：如何確保UI正常工作并在不同設(shè)備上感覺自然？列舉一些不適用于特定設(shè)備的交互模式。

不同的設(shè)備具有不同的功能，用戶希望其設(shè)備上的網(wǎng)站能夠以與其設(shè)備上的應用類似的方式運行。

臺式機和移動用戶界面之間最重要的區(qū)別是，臺式機通常由鼠標或觸控板以及快速且易于使用的鍵盤控制，而移動設(shè)備依賴于無指針的觸摸屏以及帶有經(jīng)常使用起來很麻煩。另一個考慮因素是沒有指針的設(shè)備還缺少懸停狀態(tài)，該狀態(tài)經(jīng)常用于觸發(fā)網(wǎng)頁上的某些操作。指針和觸摸屏這兩種輸入法也使不同的操作更容易（更自然）或更困難和更慢。例如，在屏幕上移動項目或在觸摸屏上拖動更容易（因此，在桌面上避免了拖動），而使用鼠標指針單擊較小的控件則容易得多（因此，UI控件應在觸摸屏上變大）。

基于屏幕尺寸的資產(chǎn)優(yōu)化

即使可以將相同的資產(chǎn)提供給不同的設(shè)備，也不意味著相同的圖像大小或視頻質(zhì)量將是*的。為了減少加載時間，尤其是在移動Internet連接上，Web設(shè)計人員應注意它們?yōu)椴煌O(shè)備提供的資產(chǎn)。

例如，一張1920像素寬，400 KB的背景照片非常適合臺式機，但在智能手機上會過分使用（明智的選擇），而下載速度較慢（明智的選擇文件大?。?。因此，*使用較小尺寸的圖像，如果用戶的屏幕足夠小，則可以使用該圖像。而且，您不希望用戶僅下載一個版本的用戶下載兩個版本。

問：無論屏幕大小如何，您是否提供相同的資產(chǎn)都重要嗎？圖像和背景在這方面有什么區(qū)別嗎？

至少對于較大的圖像文件而言，為移動設(shè)備和臺式機屏幕使用單獨的版本非常重要?？梢韵蛞苿佑脩籼峁┩粓D像的較小副本，以減少加載時間。但是，對于移動設(shè)備，不應大幅減小圖像尺寸（如果可行），因為它們的屏幕密度通常比臺式機顯示器高得多。應根據(jù)具體情況做出決定，因為某些圖像的大小可以減小，而不會產(chǎn)生太大的視覺影響，而對于另一些圖像，保留其細節(jié)很重要。

從技術(shù)上講，背景圖像（在CSS中定義）和內(nèi)容圖像（在HTML中作為圖像文件包含）之間存在很大差異?？梢暂p松地在CSS中的不同媒體查詢中分別設(shè)置背景，因此只有在用戶屏幕與特定查詢匹配時才提供每個版本。其他的則不是從Web服務器下載的。對于HTML中的圖像，仍然沒有內(nèi)置的，有效的和受良好支持的方法來根據(jù)用戶屏幕大小提供不同的文件。可以使用不同的技術(shù)來實現(xiàn)此目的，例如通過使用模擬即將到來的元素的行為的polyfill腳本，或具有自己約定的其他腳本，或使用CSS背景顯示圖像。

通常，應避免使用CSS方法，因為CSS圖像背景沒有任何語義含義，被視為修飾。此外，它缺乏可訪問性，因為無法用標記具有的title和alt屬性來描述。

當前文章：在設(shè)計和開發(fā)響應式網(wǎng)站時，必須考慮一些重要的注意事項。
分享網(wǎng)址：http://jinyejixie.com/news/192557.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務項目有響應式網(wǎng)站等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)