移动web-移动适配-体验rem案例

最新推荐文章于 2024-09-13 23:32:49 发布

Q _Q

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量33

点赞数

分类专栏：移动web 文章标签：前端 html css css3

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131368196

版权

移动web 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

此代码示例展示了如何通过设置HTML字体大小并利用媒体查询来调整REM单位，从而实现基于视口宽度的响应式设计。一个粉色的div元素的尺寸以REM为单位，会随着视口宽度的变化而变化，展示了一个适应不同屏幕尺寸的例子。

摘要由CSDN通过智能技术生成

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* 先设置html字号 后使用rem单位 1 rem = 1 html*/
        /* 
            html字号=视口宽度1/10
            例如视口为375px font-size=37.5px 
        */

        @media (width:375px){
            html{
            font-size: 37.5px;
            }
        }
        @media (width:414px){
            html{
            font-size: 41.4px;
            }
        }
        @media (width:768px){
            html{
            font-size: 76.8px;
            }
        }
        div{
            width: 5.3rem;
            height: 5.3rem;
            background-color: pink;
        }


        /* 用绝对单位px 盒子大小不会随视口大小而变化*/
        /* .box{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        } */
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果图：