移动端rem自适应

最新推荐文章于 2023-12-29 14:47:11 发布

原创最新推荐文章于 2023-12-29 14:47:11 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

42 篇文章

订阅专栏

本文分享了一种基于JS的响应式布局方案，通过动态调整html的font-size实现不同设备屏幕的完美适配，适用于VUE、React等前端框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
</head>

<script>
fnResize()
    window.onresize = function () {
      fnResize()
    }
    function fnResize() {//根据显示宽度调节html的font-size尺寸
      var deviceWidth = document.documentElement.clientWidth || window.innerWidth
      if (deviceWidth >= 750) {
      deviceWidth = 750
    }
    if (deviceWidth <= 320) {
      deviceWidth = 320
    }
      document.documentElement.style.fontSize = Math.ceil(deviceWidth / 8) + 'px'
    }
</script>

在index文件加上此段js代码,其中(deviceWidth / 8)的8是设计图高度/100。我的设计图高度是800，所以这里是100。