移动端h5的代码编写

移动端的计量单位与pc端不同主要是rem,移动端适配是将px转化为rem,并且按照页面的宽度去进行动态调整

概念:

    rem基准  rem的基准指的就是根元素(html)的font-size的大小

    rem值以及计算   原始px值/rem基准值

获取视窗宽度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

使用以下的代码即可按照设计稿的样式来进行h5页面的编写

px转化rem的函数

refreshRem(desW) {
  var winW = document.documentElement.clientWidth || document.body.clientWidth;
  document.documentElement.style.fontSize = (winW /desW)* 100 + 'px'
},

监听页面的变化 动态调整html的font-size的大小

window.addEventListener('resize', this.refreshRem(375));


版权声明:本文为weixin_40699635原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。