Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【CSS】移动端布局-布局术语与实现原理:视口
Blogger Information
Blog 94
fans 0
comment 0
visits 92513
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【CSS】移动端布局-布局术语与实现原理:视口
可乐随笔
Original
367 people have browsed it

移动端布局术语与实现原理

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <!-- 视口：viewport -->
  7.     <!-- width=device-width:布局视口宽度 = 设备视口宽度 -->
  8.     <!-- initial-scale=1.0 1：1当前处于“理想视口”状态，不需要缩放 -->
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>移动端布局术语与实现原理</title>
  11. </head>
  12. <body>
  13.     <!-- 
  14.         * 移动端布局单位的三个问题？
  15.         * 1. 为什么用 `rem`?
  16.         * 因为：`rem` = `html.fontsize`,而`html`一个页面只有一个，所以保证rem的`唯一性`
  17.         * 所以：可以确保，在页面的任何地方，引用rem，可确保总是计算出一个确定的值
  19.         * ----------------------------------------------------------------
  21.         * 2. 1rem = ? 比例合适？
  22.         *   1rem = 100px, 为什么是100px，为了计算方便
  24.         * 3. 为什么不能将 `rem` 写死？
  25.         *   默认情况下 ，rem应该是一个常量`html.fontsize`，这个在PC端布局会非常方便
  26.         *   但是在移动端状态下，会非常麻烦，原因就是移动端屏幕非常多（375px- ?）
  27.         *   所以，rem不能是是一个常量，必须是一个可以动态调整的数据
  28.         *   VW:视口比例单位，当前视口（手机宽度）不管多宽都是100VW
  29.         *   所以，可以使用 `rem` + `vw`来实现动态 `rem`
  30.         -->
  32.         <!-- 
  33.             * 三个视口
  34.             * 1. 布局视口：面向开发者，与设备无关，默认980px，用`width`
  35.             * 2. 视觉视口：与具体的便件相关，用户看到的手机屏幕大小
  36.             * 3. 理想视口：抽象的，`width` = `device-width`,布局视口 = 视觉视口
  37.          -->
  39.          <!-- 
  40.             * rem | vw
  41.             * 1. 1vw = ?
  42.             * 2. 1rem = ?
  44.             * ----------------------------------------
  45.             * DPR:设备像素比 = 设备像素 / 布局像素
  46.             * iphone SE = iphone 6 (物理像素750px) , DPR =2 
  47.             * 750px / 350px(布局像素) = 2、
  48.             * DPR 越大，屏幕越清楚
  49.             * ----------------------------------------
  51.             * 1rem = ?
  52.             * 1rem = 100px = html.fontsize
  53.             * iphone6 (375px):1rem = 100px = 3.75rem
  55.             * iphone6: 1rem = 100px = 375px/3.75
  56.             * iphone12: 1rem = 104px = 390px/3.75
  57.             * iphone11max : 1rem = 110.4.px = 414px/3.75
  59.             * 此时，rem 已经动态发生了变化，根据屏幕宽度
  60.             * 此时 1vw 没变化，1vw = 3.75px
  61.             * ----------------------------------------
  63.             * 1vw = ?
  64.             * iphone 6 = 375px = 100vw
  65.             * 1vw = 1 / 100vw = 375px / 100 = 3.75px
  66.             * 375px : 1vw = 3.75px
  67.           -->
  68.     <style>
  69.         html {
  71.             /* 动态计算rem */
  72.             /* calc()：计算函数，符号两边要留有空格 （+-/X） */
  73.             /* font-size:calc(v1 - v2) */
  74.             /* 1. 不管视口有多宽都用 100vw表示 */
  75.             /* 2. 根据设计基准, 1vw = 3.75px */
  76.             font-size:calc(100vw / 3.75px);
  77.         }
  79.         body {
  80.             /* 将浏览器中的字号进行重置:16px */
  81.             font-size: 0.16rem;
  82.         }
  84.     </style>
  85. </body>
  86. </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!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post