移动端适配单位rem

0 写在前面

　　本周惊喜地发现，其他各个老师的软工班（罗杰老师班和欧阳老师班）的软工项目的alpha版本都已经发布了！（然而我们软工项目还没开始写代码…逃…）

　　十分好奇的我第一时间下载了一些他们的产品进行体验，由于我是在手机上打开的他们的项目，一些基于web端开发的产品在前端效果上看起来有些古怪。进而发现，可能是在各个项目组的开发过程中，没有将移动端的适配问题考虑在内。

　　由于手机网络的普及，越来越多的用户开始使用移动端产品，因此在产品的开发和设计时，有必要考虑移动端的适配问题。

　　今天我讲通过这篇文章来记录一下移动端适配单位rem的学习笔记。

1 基本知识点

逻辑像素： CSS像素
物理像素：设备出厂时即被设定好的（也叫设备像素）
设备像素比dpr = 物理像素/CSS像素

2 rem & em

em：
- font-size的值相对于父级字体大小
- width，height的值相对于自身字体大小
- 谷歌浏览器限制最小字体大小为12px若设置低于12px则字体大小按12px计算
rem:相对于跟标签html的font-size值

3 屏幕尺寸

640 * 1136 -> 物理像素
- eg: iphone5 dpr = 2
- 一个div在设计稿里的实际宽度200px -> 100px
320 * 568 -> CSS像素
一列占：320 / 16 (总列数：自己设置) = 20px (每列占的CSS像素)
一个div元素所占列数 = 100px / 20px = 5rem

4 总结

元素适配宽度 = 元素所占列数rem
一列的宽度 = 屏幕实际宽度 / 总列数
元素实际列数 = 元素在设计稿里的宽度 / 一列的宽度

5 示例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>rem</title>
 8     <style>
 9         html{
10             font-size: 20px;
11         }
12         div{
13             /* CSS像素 ：逻辑像素*/
14             height: 90px;
15             width: 90px;
16             background-color: red;
17             /* 物理像素：设备出厂时即被设定好的（也叫设备像素） */
18             /* 设备像素比dpr = 物理像素/CSS像素 */
19         }
20         .demo{
21             font-size: 16px;
22         }
23         .demo .em{
24             /* 相对于父级字体大小 */
25             font-size: 2em;
26             width: 3em;
27             height: 3em;
28         }
29         .demo .rem{
30             font-size: 2rem;
31             width: 5rem;
32             height: 5rem;
33             background-color: aqua;
34         }
35     </style>
36 </head>
37 <body>
38     <!--
39         rem&em
40         em：1. font-size的值 相对于父级字体大小
41             2. width height的值 相对于自身字体大小
42         注意：谷歌浏览器限制最小字体大小为12px若设置低于12px则字体大小按12px计算
43         rem:相对于跟标签html的font-size值
44     -->
45     <!--屏幕尺寸
46         640 * 1136 -> 物理像素 
47         eg: iphone5 dpr = 2
48         一个div在设计稿里的实际宽度200px -> 100px 
49         320 * 568 -> CSS像素
50 
51         一列占：320 / 16 (总列数：自己设置) = 20px (每列占的CSS像素)
52         一个div元素所占列数 = 100px / 20px = 5rem
53 
54         1. 元素适配宽度 = 元素所占列数rem
55         2. 一列的宽度 = 屏幕实际宽度 / 总列数
56         3. 元素实际列数 = 元素在设计稿里的宽度 / 一列的宽度
57     -->
58         
59     <div class="demo">
60         <p class="em">好好学习</p>
61         <div class="rem">天天向上</div>
62     </div>
63 </body>
64 </html>

相关阅读:
Leetcode 1191 K次串联后的最大子数组之和 Kadane 算法
 剑指Offer 38 字符串的排列
 explain结果每个字段的含义说明
 Timsort算法
 synchorized的锁升级
 进程IPC通信方式7种
 死锁知识点总结
 java中各种锁介绍
 运算符优先级记录
 C++ auto关键字
原文地址：https://www.cnblogs.com/chrischen98/p/10759541.html