1 基本知识点
-
-
物理像素：设备出厂时即被设定好的（也叫设备像素）
-
设备像素比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>