同學(xué)們在進行前端開發(fā)的時候經(jīng)常會運用到響應(yīng)式布局，在進行移動端頁面開發(fā)的時候還會使用到移動端布局的知識，那么你知道他們都有哪些優(yōu)缺點和相同之處嗎？下面小千就來給大家列舉一下。

      響應(yīng)式布局

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

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

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

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

      移動端布局

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

      一句話話總結(jié)：

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

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

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

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

      移動端布局優(yōu)缺點：

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

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

      不同之處：

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

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

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

      相同之處：

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

      2、兩者都要面對適配的問題

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