HTML_根据屏幕的大小自适应 rem布局

最新推荐文章于 2024-04-29 11:17:53 发布

小歪 | 前端

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量523

点赞数 1

分类专栏： # HTML

本文链接：https://blog.csdn.net/weixin_44599931/article/details/114695799

版权

HTML 专栏收录该内容

23 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>rem自适应</title>
    <style type="text/css">
        section {
            width: 100%;
            height: 100%;
            background: red;
        }
        .page {
            width: 5rem;
            height: 10rem;
            background: yellow;
            font-size: 0.3rem;
        }
    </style>
</head>
<body>
    <section>
        <div class="page">rem跟着html:font-size变化</div>
    </section>
</body>
<script type="text/javascript">
    var docEl = document.documentElement,
        //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
        //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
        //总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            //设置根字体大小
            docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
        };
    //绑定浏览器缩放与加载时间
    window.addEventListener(resizeEvt, recalc, false);
    document.addEventListener('DOMContentLoaded', recalc, false);
</script>
</html>

小歪 | 前端

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML_根据屏幕的大小自适应 rem布局

<!DOCTYPE html><html><head> <title>rem自适应</title> <style type="text/css"> section { width: 100%; height: 100%; background: red; } .page {
复制链接

扫一扫