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

适配的目标

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

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.markdown

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

font-size字号 = 屏幕宽度 / 份数
复制代码

这里的主要思想是无论屏幕宽度是怎样的, 咱们要保证的是划分的份数是相同的, 好比说都是15份. 当咱们使用rem做为单位为一些页面元素设置大小的时候, 无论屏幕有多宽, 每一份HTML字体大小在当前屏幕中占的比例都是相同的, 所以咱们设置的那些页面元素在整个屏幕中占的比例也是相同的, 这样就实现了不一样屏幕下, 页面元素盒子等比例缩放的效果.svn

代码演示:

<!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

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

不须要写不一样屏幕的媒体查询, 由于里面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