移动适配---em、rem 、 vw / vh的原理以及小程序的 rpx

wendyymei

已于 2022-08-25 17:19:26 修改

阅读量1.2k

点赞数 1

分类专栏：知识点总结文章标签： css html css3

于 2022-08-19 09:44:03 首次发布

本文链接： https://blog.csdn.net/weixin_43323097/article/details/126418397

版权

知识点总结专栏收录该内容

13 篇文章 0 订阅

订阅专栏

em

是相对于父元素标签的字号，和百分比%类似，%也是相对于父级的，只不过是%相对于父级宽度的，而em相对于父级字号的

✨移动适配

网页效果
- 屏幕宽度不同，网页元素尺寸不同（等比缩放）
适配方案
- rem
  - 相对单位
  - rem单位是相对于HTML标签的字号（要存在）相对视口宽度的 1/10
  - 1rem = 1HTML字号大小
- vw / vh
  - 相对单位
  - 相对1/100视口宽高度

rem移动适配

rem移动适配 - 媒体查询

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

写法

 @media (媒体特性) {

              选择器{

                  CSS属性

              }

          }

使用rem单位设置网页元素的尺寸

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

/* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
@media (width:320px) {
    html {
        font-size: 32px;
    }
}

rem适配原理
- 目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
- rem单位尺寸
  1. 根据视口宽度，设置不同的HTML标签字号
  2. 书写代码，尺寸是rem单位
    1. 确定设计稿对应的设备的HTML标签字号
      - 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
    2. ⭐️ rem单位的尺寸（假设设计稿宽度为375px，则字体为37.5px）
      - rem = px / 37.5
      - rem单位的尺寸 = px单位数值 / 基准根字号
```
  .box {
      /*  68 * 29  */
      /* 设计稿375, HTML 37.5   68/37.5 */
      
      width: calc(10rem * 68px  / 375px);
      height: calc(10rem * 29px / 375px);
      background-color: pink;
  }
```
⭐️ flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果下载地址
- flexible.js是手淘开发出的一个用来适配移动端的js框架。
- 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
- 即把根标签的字体大小改成了当前屏幕的十分之一大小

vw / vh移动适配

简单来说，即 100vw/vh 即为视口宽高度

相对单位
相对视口的尺寸计算结果
vw：viewport width
- 1vw = 1/100视口宽度
vh：viewport height
- 1vh = 1/100视口高度
vw单位尺寸
1. 确定设计稿对应的vw尺寸（1/100视口宽度）
  - 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）
2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
vw 和 vh 不要混用

代码演示以及calc 的语法
❗❗注意 calc的语法比较严格尤其注意空格

// 设计稿为 375px，存在一个大小为100px的div，字体大小也为100px。
// 375px = 100 vw 那么 1 px = 100vw / 375
// 因此 100px = 100vw * 100 / 375

 div{
   width: calc(100vw * 100 / 375);
   height: calc(100vw * 100 / 375);
   font-size: calc(100vw * 100 / 375);
 }