移动端屏幕适配基础

1.rem px

rem(font size of the root element)是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。

  • 适配原理:将px替换成rem,动态修改html的font-size适配。它可以很好的根据根元素的字体大小来进行变化,从而达到各种屏幕基本一直的效果体验。
  •  
  • 移动端屏幕适配基础_第1张图片

//得到手机屏幕的宽度

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

//得到html的Dom元素

let htmlDom = document.getElementsByTagName('html')[0];

//设置根元素字体大小

htmlDom.style.fontSize= htmlWidth/20 + 'px';

 

 

你可能感兴趣的:(js)