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中讲的一些编程思维,封装逻辑都是非常棒的,很值得去学习一下,对于以后大型项目的维护有很大的帮助。
站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏