rem原理与使用方式

最新推荐文章于 2023-05-10 10:46:52 发布

mwmmt

最新推荐文章于 2023-05-10 10:46:52 发布

阅读量244

点赞数 1

文章标签：前端 html html5

本文链接：https://blog.csdn.net/mwmmt/article/details/127310815

版权

rem 长度单位相对单位

rem相对于html 字体大小, 1rem=1html文字大小.

总结:把页面内容的单位转换为rem,时刻改变html字体大小,即可完成适配(页面变大内容变大;页面变小内容变小.)

rem与em 区别

rem只相对于html字体标签大小变化

em会根据父元素字体大小与自己的字体大小变化

媒体查询

能够查询检屏幕的大小

 @media (width:375px){
            body{
              background-color: pink;
            }
        }
       当屏幕为375px时,body标签背景色为粉色

设置html标签字体大小

rem= 当前测量值 / 37.5( 参考标准稿)

 <style>
        /* 我们推荐把当前页面分成10份,html字体大小占10/1 */
        @media (width:375px) {
            html{
                font-size: 37.5px;
            }
        }
        @media (width:414px) {
            html{
                font-size: 41.4px;
            }
        }
        .box{
            /* rem=测量值/37.5rem(标准稿) */
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 需求:在375屏幕大小显示75*75的粉色盒子 -->
   
    <div class="box"></div>