移動端&pc端 響應式佈局 or rem佈局 & flex佈局

本文主要對如下問題的思考

當我門開發一個h5頁面時候，究竟是 pc和h5共用一套頁面 仍是分開開發兩套呢？

現象分析：

網易、淘寶等大廠 是 分開開發，也就是 pc一套，h5一套
拉鉤。某些我的博客 公用一套

結論

須要分狀況而定，像網易淘寶此類的pc端頁面複雜的 是適合分開兩套開發，由於h5和pc端佈局差別較大，不方便作響應式開發，
而我的博客這樣的 pc端就是一個列表而已 最多加一個側邊欄的 這種簡單的頁面 是比較適合 作響應式媒體查詢的

具體的佈局方式分析，其實網上有不少很詳細的教程了 我在這裏只是簡單說明

• rem佈局+flex

  1 設置視口
  

  2 根據公司ui根據那個尺寸的手機出的圖 好比是iPhone6 （750px） 動態改變跟頁面的fontsize
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
  得出fontsize=100px
  3 得出總體寬度，得出畫一個100px寬的盒子須要多少rem
  那麼整個屏幕的寬度就是 7.5rem
  ui圖100px的盒子 等於 2rem

  4 經過媒體查詢改變body的fontsize

  5 全部的字體依然按照px寫，只有盒子寬度按照rem去寫

  可參考：
  http://web.jobbole.com/93253/
  http://www.cnblogs.com/lyzg/p/4877277.html

• 響應式佈局 （媒體查詢）

  就根據 不一樣的幾個寬度 動態設置咱們body的最大寬度就好了，不要所有是100%
  效果可參考 http://justyeh.com/

轉載於:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/8064381.html