vue项目移动端rem的快速用法-小月博客

vue项目移动端rem的快速用法

想了一圈不知道要写一个什么标题，知识点不是新鲜难懂的，但是呢常用，正好学习的时候用到了就记录一下吧。

我们知道PC端的项目写px或者vw，vh就可以搞定，但是移动端就不是了，因为市面上各种分辨率的手机都有怎么做到适配呢，开始我用的是百分比，但是文字大小就不能控制了，后来写小程序可以用rpx，但是rpx只有在小程序里面适用。所以最近在学习vue3的时候正好看到了一个关于移动端适配的方法，借助rem来实现。下面就简单的来分享一下rem怎么做到适配移动端项目的。

1、设置根元素字号大小

rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。

html{
    font-size: 100px;
}

body{
    font-size: 12px;
}

2、JS部分自动适配不同分辨率的屏幕

计算不同屏幕的宽高比例，动态修改根元素的字体大小，做到自动适配，网上见过很多案例，这个是最简单的。

<script>
      var width = document.documentElement.clientWidth || document.body.clientWidth
      var ratio = width / 375;
      var fontSize = 100 * ratio
      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px'
</script>

只需要上面两个步骤就可以实现移动端的自适应式配。

相比百分比，rem绝对是最佳的选择。这也是我在学习《vue3从入门到进阶》学到的一些知识，vue3中讲的一些编程思维，封装逻辑都是非常棒的，很值得去学习一下，对于以后大型项目的维护有很大的帮助。