学习vue

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

(其中全部替换时,不能将前面js中换算公式替换了,这里要注意一下)

这个自适应貌似不可以解决所有的分辨率,有待更新更正统的方法,应急足够了。


更新于2019.12.04


正统的方法来了!点击下方链接,阿星手把手教你自适应!

vue项目PC端随屏幕分辨率与窗口大小自适应(五步完成,吐血干货)

上一篇下一篇

猜你喜欢

热点阅读