day05 移动适配：rem、less

满分的宅男

已于 2023-08-24 17:24:17 修改

阅读量432

点赞数

分类专栏：移动web 文章标签： less css html

于 2022-02-09 16:36:03 首次发布

本文链接：https://blog.csdn.net/weixin_43730921/article/details/122836319

版权

本文介绍了移动适配中的rem单位及其应用，详细讲解了如何利用媒体查询进行响应式布局，并提到了flexible.js框架在适配移动端的作用。此外，还探讨了CSS预处理器Less的嵌套写法，帮助理解其在减少样式冲突中的优势。

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

一、rem

二、less

三、案例

一、rem

px单位：绝对单位

rem单位：相对单位

rem单位时相对于HTML标签的字号计算结果

1rem=1HTML字号大小（根字号）

<!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>rem基本使用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html{
            font-size: 20px;
        }
        .box{
            width: 2rem;
            height: 3rem;
            background-color: red;
        }         
    </style>
</head>

<body>
    <div class="box"></div>
</body>
</html>

效果：

1.媒体查询

检测视口的宽度，然后编写差异化的css样式

语法：

@media (媒体特性) {

选择器{

css属性

}

<style>
        /* 使用媒体查询 根据不同视口宽度 设置不同的根字号 */
        @media (width:375px) {
            html{
                font-size: 40px;
            }
        }
</style>

目前rem布局方案中，将网页分成10份，HTML标签的字号为视口宽度的1/10

<!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>rem适配</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        /* 媒体查询 */
        @media (width:320px) {
            html{
                font-size: 32px;
            }
        }
        @media (width:375px) {
            html{
                font-size: 37.5px;
            }
        }
        @media (width:414px) {
            html{
                font-size: 41.4px;
            }
        }
        .box{
            width: 5rem;
            height: 3rem;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
</html>

效果：