一、移动适配

1、什么是移动适配？

答：就是当设备宽度不同的时候，网页元素的宽度和高度都要适配。

2、移动适配的两个解决方案。

rem：目前多数企业在用的解决方案;

vw / vh：未来的解决方案。

两种都必须掌握！！！

二、rem

rem是移动适配的解决方案之一；

rem就是一个单位；

回想之前学的单位，px不可以自动适配；百分比只能让宽自动适配，高还是要设置固定的值。

1、rem单位

是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。

如果html标签的font-size是20px，那么1rem就是20。

网页的根标签是：html标签；html字号也叫根字号，根标签字号。

2、rem的基本使用

既然他相对于html标签的字号，所以一定要先设置html标签；

<!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;
        }
        
        /* 1rem = 1html标签字号大小 */
        html {
            font-size: 20px;
        }
        
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>

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

</html>

3、使用rem完成移动适配

a、手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？

答：媒体查询；媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式；当某个条件成立, 执行对应的CSS样式。

写法：括号里的width:320px；就是要用的设备的视口的宽度。 如果用的屏幕视口宽度是320px，根标签里的font-size就会生效，如果不是，就不会生效。

 

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

        @media (width:320px) {
            html {
                font-size: 30px;
            }
        }
    </style>
</head>

<body>

</body>

</html>

b、设备宽度不同，HTML标签字号设置多少合适？

答：设备宽度大， 元素尺寸大；

        设备宽度小，元素尺寸小。

目前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;
        }
        
        /* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
        @media (width:320px) {
            html {
                font-size: 32px;
            }
        }

        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }
        @media (width:414px) {
            html {
                font-size: 41.4px;
            }
        }


        /* 2. 书写盒子尺寸, 单位rem */
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
        
    </style>
</head>

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

</html>

 4、rem适配原理

1. 根据视口宽度，设置不同的HTML标签字号；

2. 书写代码，尺寸是rem单位

        2.1 确定设计稿对应的设备的HTML标签字号；

                查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）         2.2 rem单位的尺寸 Ø N * 37.5 = 68 → N = 68 / 37.5 Ø rem单位的尺寸 = px单位数值 / 基准根字号；

/* 移动适配 */
/* 1. HTML标签加字号 1/10; 2. 写rem单位的尺寸 */
@media (width: 320px) {
    html {
        font-size: 32px;
    }
}
@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media (width: 414px) {
    html {
        font-size: 41.4px;
    }
}

.box {
    /* 68 * 29 */
    /* width: 68px; */
    /* 设计稿375, HTML 37.5   68/37.5 */
    width: 1.813rem;
    height: 0.773rem;
    background-color: pink;
}

5、flexible

flexible.js是手淘开发出的一个用来适配移动端的js框架；

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size；

就是来代替很多个@media的。

<!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>
        .box {
    /* 68 * 29 */
    /* width: 68px; */
    /* 设计稿375, HTML 37.5   68/37.5 */
    width: 1.813rem;
    height: 0.773rem;
    background-color: pink;
}
    </style>
</head>
<body>
    <div class="box"></div>

    <script src="../js/flexible.js"></script>
</body>
</html>

 

# css3
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

华为开发者空间云开发环境（容器）操作指导

avatar 华为开发者空间
cover

【openGauss】Oracle与openGauss/GaussDB数据一致性高效核对方案

avatar 华为开发者空间

【GaussDB】在逻辑复制中剔除指定用户的事务

基于逻辑复制标签实现过滤，技术上可行，但打标签这个附加操作需要在执行sql前执行（除非使用触发器，但触发器属于高风险操作，不建议使用），如果漏执行，将会存在错误覆盖目标库的风险。历史表归档方案通过在源库建立历史表存储归档数据，配置复制规则排除历史表的删除操作，虽然会增加IO开销，但实现简单、安全性高，避免了事务过滤可能带来的风险。虽然插入历史表会产生额外IO，可能使数据归档操作时间翻倍，但相比剔除

avatar 华为开发者空间