vue前端页面自适应（此篇为应急方法，正统方法见此文章底部链接）
2019-11-12 本文已影响0人
顺小星
写于2019.11.12
这是所有前端都无法回避的问题，上周项目原本是按设计图1920的尺寸写死的px，后来客户因为电脑是1600的分辨率，打开之后的样式出现了变形的情况。
解决办法：
1、引入一段js进行单位换算；
2、将所有的px改成rem单位。
步骤：
一、在要进行自适应<script>中写入下段代码
<script>
(function() {
function setRootFontSize() {
let rem, rootWidth;
let rootHtml = document.documentElement;
//限制展现页面的最小宽度
rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
// 19.2 = 设计图尺寸宽 / 100（ 设计图的rem = 100 ）
rem = rootWidth / 19.2;
// 动态写入样式
rootHtml.style.fontSize = `${rem}px`;
}
setRootFontSize();
window.addEventListener("resize", setRootFontSize, false);
})();
其中要修改的尺寸，根据你的原始设计稿来
image.png
二、将所有的px全部替换成rem，并处以100。例如：
image.png
