用rem单位与百分比做各种屏幕的适配

最新推荐文章于 2025-04-10 09:40:22 发布

原创最新推荐文章于 2025-04-10 09:40:22 发布 · 701 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了实现响应式网页设计的四个关键步骤：设置Viewport，利用JS动态调整根字体大小，CSS中使用百分比宽度和rem单位，确保网页在不同设备上都能良好显示。

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

1.设置 Viewport：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2.屏幕大小改变，根字体大小改变的js，我这边设计宽度是1349px：

<script>
      var designWidth = 1349,
        ratio = 100;
      document.documentElement.style.fontSize = ((window.innerWidth / designWidth) * ratio) + 'px';
      window.onresize = function() {
        document.documentElement.style.fontSize = ((window.innerWidth / designWidth) * ratio) + 'px';
      }
    </script>

3.设置根字体大小：