• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 響應(yīng)式網(wǎng)站的利與弊

響應(yīng)式網(wǎng)站的利與弊

網(wǎng)站工程師 于2019-08-22 10:49發(fā)表 閱讀次數(shù) 2481次

響應(yīng)式網(wǎng)站，或者是html5+css3網(wǎng)站，對(duì)于很多普通青島網(wǎng)站建設(shè)用戶(hù)來(lái)說(shuō)這是一個(gè)比較新的名字，這種技術(shù)最大特點(diǎn)就是對(duì)一些移動(dòng)設(shè)備的兼容性更好些，但是這個(gè)也并不是萬(wàn)能的。 　　好消息是，你可以改善它。 　　在這篇文章中，我們會(huì)談到移動(dòng)互聯(lián)網(wǎng)和響應(yīng)式設(shè)計(jì)的關(guān)系，首先將介紹如何巧妙的運(yùn)用響應(yīng)式設(shè)計(jì)，為什么性能對(duì)移動(dòng)端非常重要，為什么響應(yīng)式設(shè)計(jì)不能作為你網(wǎng)站的目標(biāo)，最后技術(shù)的性能問(wèn)題幫助我們更好的理解這問(wèn)題。 　　隨著移動(dòng)互聯(lián)網(wǎng)的大熱，移動(dòng)網(wǎng)站的設(shè)計(jì)也成了眾人關(guān)注的焦點(diǎn)。如何設(shè)計(jì)出用戶(hù)友好度更高的網(wǎng)站呢？至今，仍有很多設(shè)計(jì)師認(rèn)為響應(yīng)式網(wǎng)站可以解決移動(dòng)站點(diǎn)的一切問(wèn)題，這一想法似乎真的有些“太傻太天真”了呢！那么，到底怎樣的“響應(yīng)式網(wǎng)站”才能真正解決“移動(dòng)化”帶來(lái)的問(wèn)題呢？ 　　你調(diào)整了瀏覽器，笑容攀上臉頰。你感到非常開(kāi)心，認(rèn)為自己實(shí)現(xiàn)了友好移動(dòng)的目標(biāo)。在正式討論前，讓我來(lái)預(yù)測(cè)下未來(lái)：你會(huì)失掉用戶(hù)和經(jīng)濟(jì)效益，如果你把響應(yīng)式網(wǎng)頁(yè)作為唯一目標(biāo)和唯一的解決辦法。 　　自2000年開(kāi)始，設(shè)計(jì)者和開(kāi)發(fā)者就把移動(dòng)設(shè)備的問(wèn)題過(guò)于簡(jiǎn)單化，以至于現(xiàn)在仍然有人認(rèn)為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能解決一切問(wèn)題。 　　大家必須明白，凌駕于任何目標(biāo)，移動(dòng)網(wǎng)絡(luò)體驗(yàn)必須和閃電一樣快。迅速、實(shí)用、兼容的體驗(yàn)對(duì)所有移動(dòng)設(shè)備都是挑戰(zhàn)。當(dāng)你使用響應(yīng)式設(shè)計(jì)時(shí)，這些挑戰(zhàn)都存在。從一開(kāi)始就重視性能會(huì)讓過(guò)程容易些。 　　響應(yīng)式設(shè)計(jì)是很棒，但不是萬(wàn)能鑰匙。如果你在移動(dòng)設(shè)備上一味堅(jiān)持，在轉(zhuǎn)換率后就可能隱藏著性能問(wèn)題。大約有11%的網(wǎng)站是響應(yīng)式，這個(gè)數(shù)字每月都在增長(zhǎng)，所以現(xiàn)在是談?wù)撨@個(gè)問(wèn)題的時(shí)機(jī)了。 　　據(jù)GuyPodjarny研究，72%的響應(yīng)式網(wǎng)站不分屏幕大小都提供相同的字節(jié)，盡管這會(huì)降低移動(dòng)網(wǎng)絡(luò)連接。不是所有用戶(hù)都有耐心等著網(wǎng)站加載。 　　對(duì)響應(yīng)式設(shè)計(jì)存在的問(wèn)題有了基本認(rèn)識(shí)，我們就能減低它帶來(lái)的損失。 　　移動(dòng)網(wǎng)站來(lái)自過(guò)去 　　我不是說(shuō)你不應(yīng)該采用響應(yīng)式設(shè)計(jì)或者去用m.*的子域名。事實(shí)上，現(xiàn)在社會(huì)分享無(wú)處不在，不分設(shè)備，分配給給文檔一個(gè)URL，這是聰明的做法。但這并不意味著一個(gè)單獨(dú)URL應(yīng)該提供相同的文檔或每一個(gè)設(shè)備都應(yīng)該下載相同的資源。 　　援引EthanMarcotte的話，他創(chuàng)造了“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”這個(gè)術(shù)語(yǔ)。 　　最重要的是，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的初衷不是要取代移動(dòng)網(wǎng)頁(yè)。——EthanMarcotte 　　服務(wù)器端層 　　智能響應(yīng)策略的最后一個(gè)選擇是服務(wù)器。 　　服務(wù)器端功能檢測(cè)和決策不是移動(dòng)網(wǎng)絡(luò)的新鮮玩意。類(lèi)似WURFL和DeviceAtlas的庫(kù)在市場(chǎng)上有好多年，響應(yīng)式設(shè)計(jì)和服務(wù)器組件的混合也眾所周知。有時(shí)被稱(chēng)為是響應(yīng)式設(shè)計(jì)和服務(wù)器端組件（RESS）,有時(shí)又叫自適應(yīng)設(shè)計(jì)，這提高了響應(yīng)式設(shè)計(jì)的速度和可用性，同時(shí)每一個(gè)服務(wù)器端都保持一個(gè)代碼庫(kù)。 　　很遺憾的是。這些技術(shù)這幾年并沒(méi)有什么突破性的發(fā)展。只能在博客和雜志里看到一些開(kāi)發(fā)者對(duì)“RESS”、“響應(yīng)式”、“自適應(yīng)”做比較。原因就是：我們是前端專(zhuān)業(yè)人士。任何涉及到服務(wù)器的事情看起來(lái)都是不太愉快的問(wèn)題。在一些情況下，前端設(shè)計(jì)師能把握好服務(wù)器的腳本，另一些情況是，服務(wù)器由遠(yuǎn)程開(kāi)發(fā)團(tuán)隊(duì)管理，設(shè)計(jì)師不想每做一次小的UI改變就要和遠(yuǎn)程團(tuán)隊(duì)溝通處理。我能體會(huì)這種感覺(jué)。 　　這就是在大型項(xiàng)目中要花時(shí)間思考新架構(gòu)層的原因，這樣前端工程師對(duì)服務(wù)器做決定時(shí)不會(huì)影響到后端架構(gòu)。Node.js是一個(gè)極好的備選平臺(tái)，是介于當(dāng)前企業(yè)后端基礎(chǔ)和前端之間的服務(wù)器端層。 　　在這個(gè)新的端層里，前端的工程師可以根據(jù)有現(xiàn)實(shí)的決定權(quán)，這會(huì)使得在不觸及后端架構(gòu)的情況下，讓所有設(shè)備上的體驗(yàn)更為快速、響應(yīng)、可用。 　　交互、移動(dòng)、快速 　　如果我們能使用一些其他的技術(shù)，就可以實(shí)現(xiàn)獲得響應(yīng)式設(shè)計(jì)好處的同時(shí)，不影響移動(dòng)設(shè)備的性能。響應(yīng)式設(shè)計(jì)從來(lái)不是意味著要解決“性能”，這也是為什么我們不能因此指責(zé)它的原因。然而，相信它能解決你所有問(wèn)題，這大錯(cuò)特錯(cuò)。 　　設(shè)計(jì)響應(yīng)式很重要，因?yàn)槲覀冃枰鉀Q跨桌面和移動(dòng)端視窗大小范圍的問(wèn)題。但是只考慮屏幕大小就低估了移動(dòng)設(shè)備。桌面和移動(dòng)端的界限正在變得模糊，基于不同的設(shè)備對(duì)我們而言仍然有多種可能性。但是我們還不能通過(guò)媒體查詢(xún)來(lái)決定響應(yīng)式設(shè)計(jì)的功能。一些評(píng)論家稱(chēng)之為“可靠的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”，然而另一些人則認(rèn)為它是伴隨現(xiàn)代視覺(jué)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。在沒(méi)有了解其基本語(yǔ)義的情況下，我們需要搞清楚這個(gè)問(wèn)題。 　　雖然沒(méi)有可應(yīng)用于各類(lèi)文檔的萬(wàn)全之策，但是能夠運(yùn)用一些技巧來(lái)改善現(xiàn)有響應(yīng)式的解決辦法，并且力求性能最大化。 　　1、實(shí)現(xiàn)每一個(gè)文檔對(duì)所有的設(shè)備都使用相同的URL和相同的內(nèi)容，結(jié)構(gòu)不必要相同。 　　2、當(dāng)從零開(kāi)始，遵循“移動(dòng)先行”的方法。 　　3、在一個(gè)真實(shí)設(shè)備上測(cè)試當(dāng)資源加載和顯示會(huì)發(fā)生什么。 　　4、不要依賴(lài)調(diào)整你的桌面瀏覽器。使用優(yōu)化工具測(cè)量和提高性能。 　　5、通過(guò)JavaScript傳輸響應(yīng)圖片，雖然我們更期盼著瀏覽器供應(yīng)商（例如srcset）能解決這個(gè)問(wèn)題 　　6、當(dāng)你需要當(dāng)前設(shè)備具備加載條件時(shí)，只加載JavaScript，這會(huì)在onload事件之后發(fā)生。 　　7、對(duì)移動(dòng)設(shè)備，內(nèi)聯(lián)文檔的原始視圖，或者發(fā)送一屏顯示內(nèi)容。 　　8、使用下面一種或幾種技術(shù)應(yīng)用智能響應(yīng)式的解決方案：條件加載、按組響應(yīng)、服務(wù)器端層（如適應(yīng)性方法）。 　　條件加載 　　不要總是在CSS中依賴(lài)mediaqueries，因?yàn)闉g覽器將會(huì)為所有設(shè)備加載和解析所有選擇器和樣式（后面詳細(xì)討論）。這就意味著手機(jī)為了一個(gè)大屏要下載和解析CSS。因?yàn)镃SS塊的呈現(xiàn)，你要浪費(fèi)一些時(shí)間等待聯(lián)接成功。 　　在設(shè)備上用JavaScript的matchMedia查詢(xún)來(lái)代替CSSmediaqueries，你知道這些內(nèi)容是不會(huì)變化的。例如，大家都知道iPhone不能動(dòng)態(tài)的轉(zhuǎn)換成iPad的規(guī)格，所以我們只在正在需要CSS時(shí)才用。 　　可以用特征檢測(cè)，例如Modernizr，對(duì)UI和功能性做出更明智的決定而不是僅僅根據(jù)屏幕尺寸。 　　按組響應(yīng) 　　在處理簡(jiǎn)單文檔、為臺(tái)式電腦和智能手機(jī)提供相同的HTML時(shí)，雖然為我們可以讓所有屏幕依賴(lài)一個(gè)單一的HTML基礎(chǔ)和響應(yīng)式設(shè)計(jì)，但這并不總是最好的解決方案。為什么呢？同樣是由于移動(dòng)設(shè)備的性能。 　　即使我們?cè)诜?wù)器端儲(chǔ)存相同的文檔，但是根據(jù)設(shè)備組別的不同給用戶(hù)不同的文檔。舉個(gè)例子，為一個(gè)6英寸甚至更大的屏幕提供大的浮動(dòng)菜單，為一個(gè)小屏幕提供漢堡菜單。在每個(gè)組群里，使用響應(yīng)時(shí)技術(shù)以適應(yīng)不同的場(chǎng)景，例如肖像模式和風(fēng)景模式的轉(zhuǎn)換，切換iPhone（320像素寬）、5英寸Android設(shè)備（360英寸）和平板（400像素）。

響應(yīng)式網(wǎng)站的利與弊相關(guān)標(biāo)簽：網(wǎng)站制作，網(wǎng)站推廣，建設(shè)網(wǎng)站，企業(yè)網(wǎng)站制作

相關(guān)熱點(diǎn)推薦

什么是扁平化網(wǎng)站設(shè)計(jì)風(fēng) 從個(gè)人網(wǎng)站策略體會(huì)企業(yè) 網(wǎng)頁(yè)的面包屑導(dǎo)航 什么是真正的網(wǎng)站優(yōu)化 如何利用微信高級(jí)接口？ 觸屏界面的按鈕文本設(shè)計(jì) 如何選擇青島網(wǎng)站設(shè)計(jì)公 網(wǎng)站技術(shù)規(guī)范 網(wǎng)上購(gòu)物網(wǎng)站的用戶(hù)體驗(yàn) 如何讓您的用戶(hù)知道您的 企業(yè)建網(wǎng)站主題和特色最 為何青島網(wǎng)站建設(shè)公司提 怎樣選擇網(wǎng)站設(shè)計(jì)公司 網(wǎng)頁(yè)頂尖設(shè)計(jì)師的思考與 如何規(guī)避企業(yè)建站的誤區(qū) Windows10會(huì)有 企業(yè)自助建站建議 建設(shè)符合W3C標(biāo)準(zhǔn)的網(wǎng) 企業(yè)建站，第四代標(biāo)準(zhǔn)將 企業(yè)建站基礎(chǔ)知識(shí) 如何提高自己網(wǎng)站的流量 手機(jī)端和PC電腦端的網(wǎng) 歷年來(lái)最為嚴(yán)重的10大 網(wǎng)站制作入門(mén)十則 企業(yè)網(wǎng)站建設(shè)如何設(shè)置標(biāo) 為中文而設(shè)計(jì)的文本框 簡(jiǎn)潔時(shí)尚的扁平化網(wǎng)站設(shè) 輕設(shè)計(jì)，讓網(wǎng)站靈敏輕便 如何選擇一家好的青島網(wǎng) PR值是根據(jù)什么計(jì)算的 搜索引擎優(yōu)化文案的寫(xiě)作 百度新算法分析:外鏈和 網(wǎng)頁(yè)制作,改變你的思維 怎樣交換友情鏈接 細(xì)節(jié)處理讓網(wǎng)頁(yè)設(shè)計(jì)與眾 青島網(wǎng)站制作中如何合理 網(wǎng)頁(yè)布局設(shè)計(jì)：注冊(cè)登錄 交互設(shè)計(jì)(8)—深廣度 網(wǎng)站設(shè)計(jì)中程序員和美工 網(wǎng)站建設(shè)最容易忽略的人

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專(zhuān)業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門(mén)戶(hù)