同學(xué)們在進(jìn)行前端開發(fā)的時候經(jīng)常會運(yùn)用到響應(yīng)式布局，在進(jìn)行移動端頁面開發(fā)的時候還會使用到移動端布局的知識，那么你知道他們都有哪些優(yōu)缺點(diǎn)和相同之處嗎？下面小千就來給大家列舉一下。
響應(yīng)式布局
響應(yīng)式布局是實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁展示的不同方式。
簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
優(yōu)點(diǎn)：就是面對不同分辨率設(shè)備靈活性較強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問題，主要用到的核心技術(shù)是媒體查詢。
下面是同一個響應(yīng)式項(xiàng)目展示在不同分辨率的設(shè)備下，內(nèi)容展示的布局變化
移動端布局
因?yàn)轫憫?yīng)式代碼量臃腫，加載時間長，不利于百度的關(guān)鍵詞優(yōu)化和排名等等問題，現(xiàn)在基本上各大公司官網(wǎng)往往都是就移動端和pc端做兩套，移動端布局主要是針對智能手機(jī)為主，實(shí)現(xiàn)在不同大小的設(shè)備上都能顯示同樣的界面,主要運(yùn)用技術(shù)彈性布局、rem、vw等等，也就是現(xiàn)在行內(nèi)常說的H5站（m站）
一句話話總結(jié)：
響應(yīng)式布局是為了適配不同的終端而生，可以實(shí)現(xiàn)一個網(wǎng)站在不同設(shè)備、如：pc、平板、手機(jī)，都能正常顯示。移動端布局是針對于智能手機(jī)為主的適配，也就是現(xiàn)在行內(nèi)常說的H5站（m站）。
響應(yīng)式布局優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：一個網(wǎng)站能夠兼容多個終端，靈活性較強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問題。
缺點(diǎn)：代碼量臃腫，加載時間長，不利于百度的關(guān)鍵詞優(yōu)化和排名，同時，也不利于手機(jī)版專題頁單獨(dú)做商業(yè)推廣，這是響應(yīng)式設(shè)計網(wǎng)站最致命的弱點(diǎn)。
移動端布局優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：單獨(dú)的移動站點(diǎn)會視為和PC視為兩個網(wǎng)站對待，無論排名、流量、權(quán)重都可單獨(dú)獲取，有利于百度的關(guān)鍵詞優(yōu)化和排名和推廣。
缺點(diǎn)：需要開發(fā)多套界面，且對頁面做的屏幕適配要求在一定范圍：比如pc端一般要大于1024像素，手機(jī)端要小于768像素。遇到狀況會需要改動多套代碼，流程較為繁瑣，相應(yīng)的人力成本也會增加。
不同之處：
1、適配的群體不同，響應(yīng)式適配各種終端，而移端大部分為智能手機(jī)為主
2、響應(yīng)式布局能根據(jù)不同的終端設(shè)備實(shí)現(xiàn)不同的頁面布局，而移動端布局大部分是單列布局
3、響應(yīng)式布局有可能造成冗余的代碼較多（傳統(tǒng)式響應(yīng)式布局，僅依賴于媒體查詢，控制不同的頁面布局），移動端布局冗余代碼較少，對針對性較強(qiáng)。
相同之處：
1、在智能手機(jī)上，響應(yīng)式看到的頁面效果和移動端都能正常顯示
2、兩者都要面對適配的問題
以上就是響應(yīng)式布局和移動端布局開發(fā)兩種模式的優(yōu)缺點(diǎn)和相同不同之處了，相信同學(xué)們看完應(yīng)該都對他們有一定的了解了，最后同學(xué)們?nèi)绻麑eb前端開發(fā)感興趣的話可以來千鋒HTML5大前端培訓(xùn)班了解一下我們的前端培訓(xùn)課程，現(xiàn)在找在線老師了解還能免費(fèi)領(lǐng)取前端學(xué)習(xí)資料，更有海量報名優(yōu)惠，趕緊來咨詢一下吧。
京公網(wǎng)安備 11010802030320號