这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

适配的目标

让一些不能等比自适应的元素, 达到当设备尺寸发生改变的时候, 等比例适配当前设备. 使用媒体查询, 根据不同设备按照比例设置HTML的字体大小, 然后页面元素使用rem做尺寸单位.

rem 实际开发适配方案

按照设计稿与设备宽度的比例, 动态计算并设置html根标签的font-size大小 (媒体查询).
CSS中, 设计稿元素的宽/高/相对位置等取值, 按照同等比例换算为rem的值.

rem 适配方案主流技术

主要有两种技术:

less + 媒体查询 + rem
flexible.js + rem

比较

两种方案都存在, 但方案2更简单一些.

1. 技术方案1

less
媒体查询
rem

设计稿常见尺寸宽度:

设备	常见宽度
iPhone 4.5	640px
iPhone 678	750px
Android	目前市场主流设备尺寸按照 1080px 设计

一般情况下, 我们以一套或两套效果图适应大部分的屏幕, 放弃极端屏或对其优雅降级, 牺牲一些效果, 现在基本以750px为准.

动态设置HTML标签font-size大小

假设设计稿是750px, 我们把整个屏幕划分为15等份 (当然划分标准不一, 也可以是20等份或者10等份等), 这时每一份的HTML字体大小就是50px.

当设备是320px的时候, 每一份的字体大小就是 320/15 = 21.33 px. 即:

font-size字号 = 屏幕宽度 / 份数

这里的主要思想是不管屏幕宽度是怎样的, 我们要保证的是划分的份数是相同的, 比如说都是15份. 当我们使用rem作为单位为一些页面元素设置大小的时候, 不管屏幕有多宽, 每一份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>Document</title>
    <style>
        /* 媒体查询不同屏幕下的html字号, 设计图参考750px, 将屏幕宽度划分为15等份 */
        @media screen and (min-width: 320px) {
            html {
                font-size: 21.33px;
            }
        }
        @media screen and (min-width: 750px) {
            html {
                font-size: 50px;
            }
        }

        /* 设置一个100*100的盒子 */
        .box {
            width: 2rem;
            height: 2rem;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2. 技术方案2

flexible.js
rem

手机淘宝团队出的简洁高效移动端的适配库

不需要写不同屏幕的媒体查询, 因为里面js做了处理

引入flexible.js文件

通过<script>标签.

<!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=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="js/flexible.js"></script>
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div></div>
</body>
</html>

它的原理是把当前设备划分为10等份, 但是不同设备下, 比例还是一致的. 我们要做的是确定好当前设备的HTML文字大小就可以了. 比如当前的设计稿是750px, 那么我们只需要把html文字大小设置为75px (750px/10)就可以了.

页面元素rem值: 页面元素的px值 / 75 剩余的部分就交给flexible.js来去算.

如果我们需要设置最大的宽度750px, 大于这个宽度以后就不会改变了, 需要在css里进行额外设置. 注意这里要使用 !important提升优先级, 淫才flexible.js中的css样式是行内式的.

index.css:

@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

div {
    width: 1rem;
    height: 1rem;
    background-color: pink;
}

效果:

VSCode插件 -- cssrem

Converts between px and rem units in VSCode, And support WXSS.

Support intellisense (支持智能转换)
- px -> rem
- rem -> px
- px -> rpx (微信小程序)
- rpx -> px (微信小程序)
Support mouse hover to display the conversion process
Support mark

启用cssrem后的效果:

设置HTML字体大小的基准值

一般情况下, 我们需要设置一下HTML字体大小的基准值.

点击vscode的设置

重新设置 Root Font Size

移动端布局rem