利用JavaScript判断页面宽度的响应式布局方法

最新推荐文章于 2025-01-02 10:57:42 发布

瑆箫

最新推荐文章于 2025-01-02 10:57:42 发布

阅读量533

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/mo3408/article/details/131765765

前端同时被 2 个专栏收录

309 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

web

210 篇文章 ¥129.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了使用JavaScript结合rem单位来实现响应式布局的方法。通过判断页面宽度并动态调整html元素的font-size，进而改变页面中所有使用rem单位的元素尺寸，以适应不同屏幕大小。

首先前端中，样式尺寸单位全部用rem，比如：

.content{
width: 8rem;
border-radius: 0.15rem;
font-size: 0.95rem;
letter-spacing: 0.15rem;
｝

接着页面中的html给个默认的font-size样式，比如：

<html style="font-size: 100px;">

最后就是利用JavaScript判断页面宽度，实时修改html的font-size的大小。

  <script>
        const doc = document.documentElement
        window.onresize = () => {
            // 获取窗口宽度
            let width = doc.clientWidth
            // 设备宽度 / 设计稿宽度 = 根元素html大小 / 设计稿根元素大小(假设为100px)
            // 假设我们的设计稿宽度为 750px
            if (width >= 1080) {
                doc.style.fontSize = '100px'
            } else {
                doc.style.f

了解本专栏