rem适配详细教程

最新推荐文章于 2023-04-24 22:00:41 发布

kris.jack

最新推荐文章于 2023-04-24 22:00:41 发布

阅读量5.7k

点赞数 3

本文链接：https://blog.csdn.net/kristinajack/article/details/116745572

版权

一．rem是什么？

rem是指相对于根元素的字体大小的单位。可以简单地理解为一个相对大小的单位。

二．简单区分px，em，rem

px：html中css的一个绝对单位；

em：相对于父元素的字体大小的单位；

rem：相对于根元素的字体大小的单位。

注意：em和rem都是相对单位。

下边用一个简单的例子区别px,em,rem

例：
    <style>
        html{font-size: 20px;}
        div{font-size: 2em;}
        .s1{
            font-size: 2em;
        }
        .s2{
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <div>
        <span class="s1">国</span>破山河在<span class="s2">城</span>春草木深
    </div>
</body>

其中html为根标签，div为s1，s2的父标签

三．利用rem适配不同的手机屏幕

步骤忍下：

1.在得到设计稿之后，一般情况下，把设计稿的尺寸定为750px，同时我们也需要把浏览器的模拟器也调整为750px；

2.严格按照设计稿，以rem为单位，把设计稿还原出来。首先需要确定的是html的font-size，通常定为100px，叫作rem的标准基

3.最后一步，把写好的页面，迁移到其它屏幕上，完成适配。

在迁移时，也需要换算，换算如下：

在750px的屏幕上，html的font-size地大小为100px；

在375px的屏幕上，html的font-size地大小为50px；

在414px的屏幕上，html的font-size地大小为55.2px；

<style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        @media only screen and (width:750px) {
            html{font-size:100px;}  
         }
         @media only screen and (width:414px) {
            html{font-size:52.5px;}
         }
         @media only screen and (width:375px) {
            html{font-size:50px;}
         }
         .title{font-size: 0.75rem;}
         img{width: 3.75rem;}
    </style>
</head>
<body>
    <div class="title">
        君不见黄河之水天上来
    </div>
    <img src="p01.PNG" alt="">
</body>

kris.jack

关注

3
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
rem适配详细教程

一．rem是什么？ rem是指相对于根元素的字体大小的单位。可以简单地理解为一个相对大小的单位。二．简单区分px，em，rem px：html中css的一个绝对单位； em：相对于父元素的字体大小的单位； rem：相对于根元素的字体大小的单位。注意：em和rem都是相对单位。下边用一个简单的例子区别px,em,rem例： <style> html{font-size: 20px;} ...
复制链接

扫一扫