H5移动端适配

rem适配

  • rem是相对于根元素来动态调整大小的单位。

思路

  • 想象成把屏幕分成 10 等分，那么 1rem = document.doumentElement.clientWidth / 10； (例如：375px 那么 1rem = 37.5px)
// 代码如下
let doc = document.documentElement
let width = doc.clientWidth
// 把屏幕分成10份
let num = 10
doc.style.fontSize = width / num + 'px'   // 37.5px
  • 如果要画一个40 * 40的正方形。则width: 40 / 37.5rem

媒体查询 @media

  • 主要通过查询不同宽度来执行不同css，达到适配屏幕的目的。

vw + vh + 媒体查询

  • 使用插件 (https://github.com/evrone/postcss-px-to-viewport) , 将px转换为vw
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。