移动端布局术语与实现原理
<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
