在設(shè)計(jì)和開發(fā)響應(yīng)式網(wǎng)站時(shí)，必須考慮一些重要的注意事項(xiàng)。

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

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

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

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

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

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

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

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

有時(shí)是的。在某些情況下，需要進(jìn)行此類更改：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

至少對于較大的圖像文件而言，為移動設(shè)備和臺式機(jī)屏幕使用單獨(dú)的版本非常重要?？梢韵蛞苿佑脩籼峁┩粓D像的較小副本，以減少加載時(shí)間。但是，對于移動設(shè)備，不應(yīng)大幅減小圖像尺寸（如果可行），因?yàn)樗鼈兊钠聊幻芏韧ǔ１扰_式機(jī)顯示器高得多。應(yīng)根據(jù)具體情況做出決定，因?yàn)槟承﹫D像的大小可以減小，而不會產(chǎn)生太大的視覺影響，而對于另一些圖像，保留其細(xì)節(jié)很重要。

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

通常，應(yīng)避免使用CSS方法，因?yàn)镃SS圖像背景沒有任何語義含義，被視為修飾。此外，它缺乏可訪問性，因?yàn)闊o法用標(biāo)記具有的title和alt屬性來描述<img>。

本文標(biāo)題：在設(shè)計(jì)和開發(fā)響應(yīng)式網(wǎng)站時(shí)，必須考慮一些重要的注意事項(xiàng)。
網(wǎng)頁鏈接：http://www.muchs.cn/news7/192557.html

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

廣告

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