【移动端】实现项目对不同设备的展示适配

最新推荐文章于 2024-05-20 22:08:52 发布

顾鸟

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量407

点赞数

分类专栏：移动端文章标签： css3 css javascript

本文链接：https://blog.csdn.net/qq_40881695/article/details/122097311

版权

移动端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 前提

样式都使用 rem 定义大小，不能使用 px ，设计稿的 font-size 为 100px

2. 实现

在 public/index.html 文件中

<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>