响应式开发最佳实践(viewport+rem)

一、CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

参考链接：https://github.com/jawil/blog/issues/21

要点归纳

• DPR = 设备像素/CSS像素
• viewport的值取width与 initial-scale的最大值
• viewport只是改变document.documentElement.clientWidth或window.innerWidth
• 为了防止有滚动条，禁止缩放：

二、响应式开发最佳实践（参考淘宝响应式）

参考链接： http://www.cnblogs.com/lyzg/p/4877277.html

响应式开发最佳实践原理分析：

• 在实际项目中，把与元素尺寸有关的css，如width,height,line-height,margin,padding等都以rem作为单位，这样页面在不同设备下就能保持一致的网页布局。
• font-size用媒体查询改变px，不能设为rem。
• 网易响应式：只修改font-size
• 淘宝响应式：即修改font-size，又修改viewport【看下面
  600px

  600px

  • 网易响应式（只修改font-size）：
    

  • 淘宝响应式（既修改font-size，又修改viewport）：
    

  由此可见：两者最终视觉上的宽高是一致的，但同样视觉宽高，淘宝做法显示更多的像素点，所以将会更加高清，效果更好，推荐使用。

  • 技术要点：
  • 修改viewport的时候，即使屏幕变宽（从375px-->750px），但因为font-size也跟着变大同样的倍数（从37.5-->75px），所以用rem做单位的元素，宽高在视觉上没有变化。
  • 淘宝响应式，先将页面的宽高根据DPR，由CSS像素(375px)还原成设备像素(750px)，再由此时的clientWidth(750px)按照相对值设置font-size，再由rem设置相对尺寸，这样根据750px设计稿便可轻松设计出设配不同像素的手机了
  • 若rem计算不方便，可设置font-size=cilentWidth/7.5=100px，如此便可方便换算了

  
  

  附、Domready使用“DOMContentLoaded”事件监听

  
  
  参考链接： https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded
  参考链接： https://www.jianshu.com/p/88b9d3874749