移动端适配单位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>

 

移动端适配单位rem

上一篇:Android 自定义键盘车牌号输入


下一篇:Docs-.NET-.NET-指南-异步编程模式:使用基于任务的异步模式