移动端布局术语与实现原理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口：viewport --> <!-- width=device-width:布局视口宽度 = 设备视口宽度 --> <!-- initial-scale=1.0 1：1当前处于“理想视口”状态，不需要缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>移动端布局术语与实现原理</title></head><body> <!-- * 移动端布局单位的三个问题？ * 1. 为什么用 `rem`? * 因为：`rem` = `html.fontsize`,而`html`一个页面只有一个，所以保证rem的`唯一性` * 所以：可以确保，在页面的任何地方，引用rem，可确保总是计算出一个确定的值 * ---------------------------------------------------------------- * 2. 1rem = ? 比例合适？ * 1rem = 100px, 为什么是100px，为了计算方便 * 3. 为什么不能将 `rem` 写死？ * 默认情况下 ，rem应该是一个常量`html.fontsize`，这个在PC端布局会非常方便 * 但是在移动端状态下，会非常麻烦，原因就是移动端屏幕非常多（375px- ?） * 所以，rem不能是是一个常量，必须是一个可以动态调整的数据 * VW:视口比例单位，当前视口（手机宽度）不管多宽都是100VW * 所以，可以使用 `rem` + `vw`来实现动态 `rem` --> <!-- * 三个视口 * 1. 布局视口：面向开发者，与设备无关，默认980px，用`width` * 2. 视觉视口：与具体的便件相关，用户看到的手机屏幕大小 * 3. 理想视口：抽象的，`width` = `device-width`,布局视口 = 视觉视口 --> <!-- * rem | vw * 1. 1vw = ? * 2. 1rem = ? * ---------------------------------------- * DPR:设备像素比 = 设备像素 / 布局像素 * iphone SE = iphone 6 (物理像素750px) , DPR =2 * 750px / 350px(布局像素) = 2、 * DPR 越大，屏幕越清楚 * ---------------------------------------- * 1rem = ? * 1rem = 100px = html.fontsize * iphone6 (375px):1rem = 100px = 3.75rem * iphone6: 1rem = 100px = 375px/3.75 * iphone12: 1rem = 104px = 390px/3.75 * iphone11max : 1rem = 110.4.px = 414px/3.75 * 此时，rem 已经动态发生了变化，根据屏幕宽度 * 此时 1vw 没变化，1vw = 3.75px * ---------------------------------------- * 1vw = ? * iphone 6 = 375px = 100vw * 1vw = 1 / 100vw = 375px / 100 = 3.75px * 375px : 1vw = 3.75px --> <style> html { /* 动态计算rem */ /* calc()：计算函数，符号两边要留有空格 （+-/X） */ /* font-size:calc(v1 - v2) */ /* 1. 不管视口有多宽都用 100vw表示 */ /* 2. 根据设计基准, 1vw = 3.75px */ font-size:calc(100vw / 3.75px); } body { /* 将浏览器中的字号进行重置:16px */ font-size: 0.16rem; } </style></body></html>
