<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
