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

最新推荐文章于 2024-03-12 22:27:40 发布

瑆箫

最新推荐文章于 2024-03-12 22:27:40 发布

阅读量388

点赞数

分类专栏： web前端技术文章标签：前端

本文链接：https://blog.csdn.net/mo3408/article/details/131765765

版权

web前端技术同时被 2 个专栏收录

272 篇文章 12 订阅 ¥129.90 ¥99.00

订阅专栏

超级会员免费看

web

204 篇文章 8 订阅 ¥129.90 ¥99.00

订阅专栏

超级会员免费看

首先前端中，样式尺寸单位全部用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.fontSize = width / 1080 * 100 + 'px'
            }
            console.log(width)
        }
    </script>

rem单位就可以随着html的font-size的大小自动修改大小，达到响应式布局的效果。

瑆箫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用JavaScript判断页面宽度的响应式布局方法

最后就是利用JavaScript判断页面宽度，实时修改html的font-size的大小。rem单位就可以随着html的font-size的大小自动修改大小，达到响应式布局的效果。
复制链接

扫一扫