rem设置自适应

最新推荐文章于 2022-12-27 21:39:09 发布

唐生洗发用飘柔

最新推荐文章于 2022-12-27 21:39:09 发布

阅读量203

点赞数

文章标签： css js html javascript jquery

本文链接：https://blog.csdn.net/lys1925/article/details/115334924

版权

１．rem是相对于根元素的字体大小，根据屏幕大小改变进行重新计算字体大小，一般把屏幕宽度１０等分；

２．直接上代码如下：

<html>
    <head>
        <meta name='viewport' content="width=device-width"/>
        <style type="text/css">
            body{
                margin:0;
            }
            .header{
                width: 100%;
                height: 2.5rem;
            }
            .box{
                width: 2.5rem;
                height: 2.5rem;
                line-height: 2.5rem;
                float: left;
                text-align: center;
            }
        </style>
        <script>
            (function(){
                let de = document.documentElement;
                function resetFontSize(){
                    let w = de.getBoundingClientRect().width;
                    if(w>640) w=640;
                    de.style.fontSize=(w/10)+'px'
                }
                resetFontSize();
                window.addEventListener('resize',resetFontSize,false);
            })();
        </script>
    </head>
    <body>
        <div class="header">
            <div class="box">首页</div>
            <div class="box">关于</div>
            <div class="box">个人</div>
            <div class="box">联系</div>
        </div>
        
    </body>
</html>

３．效果图：
在这里插入图片描述

唐生洗发用飘柔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem设置自适应

１．rem是相对于根元素的字体大小，根据屏幕大小改变进行重新计算字体大小，一般把屏幕宽度１０等分；２．直接上代码如下：<html> <head> <meta name='viewport' content="width=device-width"/> <style type="text/css"> body{ margin:0; }
复制链接

扫一扫