在index中添加如下内容
html,body{
font-size: 100px;
}
rem.js
// // // 实现 rem 等比适配
// const baseSize = 37.5 /* 基准适配 */
// function setRem() {
// // 设置当前页面基于 375 进行缩放适配,需要根据设计稿改写除数
// const scale = document.documentElement.clientWidth / 375
// // 设置页面根节点字体大小,第二个乘积表示最大扩大两倍
// document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
// }
// setRem()
window.onload = function () {
/*720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是
为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRem(1920, 100)
};
window.onresize = function () {
getRem(1920, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
// // rem自适应设置
// var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
// var reCalc = function() {
// //设置根字体大小npm
// var docEl = document.documentElement;
// docEl.style.fontSize = 20 * (docEl.clientWidth / 375) + 'px';
// }
// document.addEventListener("DOMContentLoaded", function() {
// reCalc();
// }, false)
// window.addEventListener(resizeEvt, reCalc, false);
在 index.js文件中引入 该rem
然后适配就做好了
这里用的是rem适配 不过没有将px直接转换成rem
需要用户手动修改一下
推荐使用这个插件
这里需要改成一百 或者改成你需要的数字 这里的一百表示 1rem = 100px
鼠标选中要修改的px 然后使用快捷键 alt+z 就可以直接将其改为rem了