首先配置rem（vue2.6.11、vue-cli4x版本的环境）：

    1. 安装 postcss-pxtorem

      npm i postcss-pxtorem

    1. 打开vue.config.js文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 滑到css相关配置地方
    loaderOptions:{
      postcss:{
          require('postcss-pxtorem')({
                rootValue: 16, //根大小
                minPixelValue: 2,
                propList: ['*']
              })
            ]
      }
    }

    1. 创建一个rem.js

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      // 基准大小
      const baseSize = 32
      // 设置 rem 函数
      function setRem () {
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / 750
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
      }
      // 初始化
      setRem()
      // 改变窗口大小时重新设置 rem
      window.onresize = function () {
        setRem()
      }

    1. 在main.js里面引入rem：

      import './util/rem'

  • 最后在写样式的时候可直接写px单位，编译后会自动转化成rem，在浏览器检查元素的时候可以看到全部已经变成rem单位。

因为登录页面被设计成不能上下滚动出现进度条的原因，导致以下问题：

*登录页面下面有个登录按钮模块,该按钮是采用绝对定位到最下边的：

avatar

*在调试过程中出现以下几个问题：

1.在小机型尺寸的时候的时候 (max-width: 360px) and (min-height: 480px) and (max-height: 666px)出现按钮覆盖它的上一个div块，例如下图所示：

avatar

解决方案：用媒体查询调整整体间距大小。

2.在安卓机型聚焦密码框输入的时候底下登录按钮元素块会直接被键盘顶到上面导致密码框被覆盖住

解决方案：1.监听resize事件，获取当前可见屏幕的高度给body赋值高度：

1
2
3
const h = document.documentElement.clientHeight||document.body.clientHeight;
body.setyle.height=h-26+"px" // 为什么减26，因为给最下面留点间距，不至于直接贴边。
if (body.style.height > 568 < 810) body.style.height = h - 10 + 'px' //这个是兼容iphone8p这一类的机型，避免高度太矮给覆盖上个元素块，像iphoneX这类屏幕下面需要安全区的就要用媒体查询配置按钮定位bottom值了。

​ 2.监听resize事件，滚动到当前活动元素的地方，下面按钮也不会因为长度不够被挤上来。

1
2
3
window.addEventListener('resize',function(){
  window.activeElement.scrollIntoView({behavior:'smooth'})
})
  • 解决完这个问题后，发现另外一个问题，就是浏览器默认字体最小到12px，但是在某些小机型上，字体12px还是会大而从一行变成两行

解决方案：

1
2
3
4
5
6
7
1.媒体查询此机型范围内的时候，给文本设置行内块属性（因为要使用transform），因为我用的是span标签包裹的，在给个能使文字变成一行的宽度， 在把这个元素缩小，就能实现视觉更小的文字效果啦～
.text {
    display: inline-block;
    /*防止字体变小但还是无法换行原因 */
    width: 120px;
    transform: scale(0.8, 0.8);
  }

*next，bug只会越改越多（狗头

  • 在做以下效果的时候，不同机型右边的图标会往下沉。

解决方案：开始写的时候是用flex布局居中的，后来换成了左浮动加相对定位实现的：图标和文本共有的大盒子，这三个元素都要加上左浮动，并且文本还要设置与当前高度相同的行高。大盒子通过 position: relative; left: 50%; transform(translate(-50%,0))

avatar

  • 最后一个（最好是

  • 在安卓机型或浏览器一些模拟机上，boder-radius：50%并不会呈现一个圆形而是一个棱角稍微有弧度一点的图形，如下图所示：

avatar

解决方案：先设置相比设计图十倍的宽和高，再使用transform:scale属性缩小十倍就可以了：

1
2
3
4
5
6
7
.circle{
    width: 50px;
    height: 50px;
    transform:scale(0.1) // 缩小十倍
    transform-origin:0% center;
}
/*伪元素必须这样，如果是一个行内块元素就只需要设置border-radius:50% 50%;也可以解决这个问题*/