rem布局原理及应用

最新推荐文章于 2024-06-25 15:37:59 发布

浅笑0104

最新推荐文章于 2024-06-25 15:37:59 发布

阅读量393

点赞数 1

分类专栏：移动端开发

本文链接：https://blog.csdn.net/qq_40947819/article/details/88139013

版权

移动端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现rem布局的背景

在做移动端开发的时候，往往要遇到适应不同手机的问题，但是各种不同的手机的屏幕宽度不同，这是为了做到适配，可以用到rem布局，我们常见的三类手机分别为iphone5（320px）、iphone6（375px）、iphone plus（414px），我们都知道在移动端设计的时候，设计师会给我们提供二倍图，因此对应以上的这三种手机，设计图会分别设计为640px、750px、1125px（特殊，他是二倍图的1.5倍）

rem布局的实现原理

假设设计师给的是640px的设计图，那么我们可以这样实现：
rem布局的实现原理

rem布局代码实现

 <style>
        /* 通过ps测量 box的宽度是16px  高度是16px
        设计图 640px 假设分为20份，一份是32 */

        /* 通过媒体查询对设置html的font-size */
        @media screen and (width:320px) {
            html {
                /* 假设把设计图分成20份，每份的大小 */
                font-size: 16px;
            }
        }
        @media screen and (width:360px) {
            html {
                font-size: 18px;
            }
        }
        @media screen and (width:768px) {
            html {
                /* calc()是计算属性 */
                font-size:calc(768px / 20)
            }
        }
        .box {
            /* width:16px/32px rem */
            width:0.5rem;
            height:0.5rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

在这里插入图片描述

这样就可以实现在不同宽度屏幕的手机上完美适应哦！

浅笑0104

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem布局原理及应用

实现rem布局的背景在做移动端开发的时候，往往要遇到适应不同手机的问题，但是各种不同的手机的屏幕宽度不同，这是为了做到适配，可以用到rem布局，我们常见的三类手机分别为iphone5（320px）...
复制链接

扫一扫

专栏目录