移动端&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