同學(xué)們?cè)谶M(jìn)行前端開(kāi)發(fā)的時(shí)候經(jīng)常會(huì)運(yùn)用到響應(yīng)式布局，在進(jìn)行移動(dòng)端頁(yè)面開(kāi)發(fā)的時(shí)候還會(huì)使用到移動(dòng)端布局的知識(shí)，那么你知道他們都有哪些優(yōu)缺點(diǎn)和相同之處嗎？下面小千就來(lái)給大家列舉一下。

      響應(yīng)式布局

      響應(yīng)式布局是實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁(yè)展示的不同方式。

      簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。

      優(yōu)點(diǎn)：就是面對(duì)不同分辨率設(shè)備靈活性較強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題，主要用到的核心技術(shù)是媒體查詢(xún)。

      下面是同一個(gè)響應(yīng)式項(xiàng)目展示在不同分辨率的設(shè)備下，內(nèi)容展示的布局變化

      移動(dòng)端布局

      因?yàn)轫憫?yīng)式代碼量臃腫，加載時(shí)間長(zhǎng)，不利于百度的關(guān)鍵詞優(yōu)化和排名等等問(wèn)題，現(xiàn)在基本上各大公司官網(wǎng)往往都是就移動(dòng)端和pc端做兩套，移動(dòng)端布局主要是針對(duì)智能手機(jī)為主，實(shí)現(xiàn)在不同大小的設(shè)備上都能顯示同樣的界面,主要運(yùn)用技術(shù)彈性布局、rem、vw等等，也就是現(xiàn)在行內(nèi)常說(shuō)的H5站（m站）

      一句話話總結(jié)：

      響應(yīng)式布局是為了適配不同的終端而生，可以實(shí)現(xiàn)一個(gè)網(wǎng)站在不同設(shè)備、如：pc、平板、手機(jī)，都能正常顯示。移動(dòng)端布局是針對(duì)于智能手機(jī)為主的適配，也就是現(xiàn)在行內(nèi)常說(shuō)的H5站（m站）。

      響應(yīng)式布局優(yōu)缺點(diǎn)：

      優(yōu)點(diǎn)：一個(gè)網(wǎng)站能夠兼容多個(gè)終端，靈活性較強(qiáng)，能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題。

      缺點(diǎn)：代碼量臃腫，加載時(shí)間長(zhǎng)，不利于百度的關(guān)鍵詞優(yōu)化和排名，同時(shí)，也不利于手機(jī)版專(zhuān)題頁(yè)單獨(dú)做商業(yè)推廣，這是響應(yīng)式設(shè)計(jì)網(wǎng)站最致命的弱點(diǎn)。

      移動(dòng)端布局優(yōu)缺點(diǎn)：

      優(yōu)點(diǎn)：?jiǎn)为?dú)的移動(dòng)站點(diǎn)會(huì)視為和PC視為兩個(gè)網(wǎng)站對(duì)待，無(wú)論排名、流量、權(quán)重都可單獨(dú)獲取，有利于百度的關(guān)鍵詞優(yōu)化和排名和推廣。

      缺點(diǎn)：需要開(kāi)發(fā)多套界面，且對(duì)頁(yè)面做的屏幕適配要求在一定范圍：比如pc端一般要大于1024像素，手機(jī)端要小于768像素。遇到狀況會(huì)需要改動(dòng)多套代碼，流程較為繁瑣，相應(yīng)的人力成本也會(huì)增加。

      不同之處：

      1、適配的群體不同，響應(yīng)式適配各種終端，而移端大部分為智能手機(jī)為主

      2、響應(yīng)式布局能根據(jù)不同的終端設(shè)備實(shí)現(xiàn)不同的頁(yè)面布局，而移動(dòng)端布局大部分是單列布局

      3、響應(yīng)式布局有可能造成冗余的代碼較多（傳統(tǒng)式響應(yīng)式布局，僅依賴(lài)于媒體查詢(xún)，控制不同的頁(yè)面布局），移動(dòng)端布局冗余代碼較少，對(duì)針對(duì)性較強(qiáng)。

      相同之處：

      1、在智能手機(jī)上，響應(yīng)式看到的頁(yè)面效果和移動(dòng)端都能正常顯示

      2、兩者都要面對(duì)適配的問(wèn)題

      以上就是響應(yīng)式布局和移動(dòng)端布局開(kāi)發(fā)兩種模式的優(yōu)缺點(diǎn)和相同不同之處了，相信同學(xué)們看完應(yīng)該都對(duì)他們有一定的了解了，最后同學(xué)們?nèi)绻麑?duì)web前端開(kāi)發(fā)感興趣的話可以來(lái)千鋒HTML5大前端培訓(xùn)班了解一下我們的前端培訓(xùn)課程，現(xiàn)在找在線老師了解還能免費(fèi)領(lǐng)取前端學(xué)習(xí)資料，更有海量報(bào)名優(yōu)惠，趕緊來(lái)咨詢(xún)一下吧。