第一种方法:JS配合修改配合rem适配
下面展示一些 内联代码片
。
var designWidth = 375; // 设计稿宽度
var remPx = 100; // 在屏幕宽度375px,的时候,设置根元素字体大小 100px
var scale = window.innerWidth / designWidth; //计算当前屏幕的宽度与设计稿比例
// 根据屏幕宽度 动态计算根元素的 字体大小
document.documentElement.style.fontSize = scale*remPx + 'px';
这里我们计算当前屏幕的宽度与设计稿比后用比例scale乘上100,是因为rem都是基于font-size值设置的,100便于计算,值可以为任意数,比如10,但是Chrome中最小为12,所以这里选择用100;
比如某个元素,设计稿设计宽度为 640px, 我们需要在css中设置 width: 6.4rem
比如某个元素,设计稿设计字体大小是 16px, 我们需要在css中设置 font-size:0.16rem
从而达到rem适配。
第二种方法:viewport适配
原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度.
//获取meta节点
var metaNode = document.querySelector('meta[name=viewport]');
//定义设计稿宽度为375
var designWidth = 375;
//计算当前屏幕的宽度与设计稿比例
var scale = document.documentElement.clientWidth/designWidth;
//通过设置meta元素中content的initial-scale值达到移动端适配
meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
第三种方法:JS动态修改配合rem适配
这种方法跟第四种雷同,但不需要再在less中定义变量,只需要进行js获取配合查找替换px即可。
// 计算屏幕宽度
var screen = document.documentElement.clientWidth;
// 设置根元素字体大小
document.documentElement.style.fontSize = screen + 'px';
.box{
width:200px;
height:200px;
}
.box{
width:200/375rem;
height:200/375rem;
}
分析:
这种方法是js动态获取屏幕宽度,直接将html的font-size设置为屏幕的宽度,再在less中进行换算。
若此时js获取的屏幕宽度为750px,html的font-size值设置为750px后,此时计算box的width为400px
200/375rem = 200/375*750 px = 400px