关闭广告
博主信息
可乐随笔
博文
56
粉丝
0
评论
0
访问量
8923
积分:0
P豆:122

【CSS】移动端布局-布局术语与实现原理:视口

2022年11月27日 20:21:28阅读数:130博客 / 可乐随笔/ PHP前端

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

  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,可确保总是计算出一个确定的值
  18. * ----------------------------------------------------------------
  19. * 2. 1rem = ? 比例合适?
  20. * 1rem = 100px, 为什么是100px,为了计算方便
  21. * 3. 为什么不能将 `rem` 写死?
  22. * 默认情况下 ,rem应该是一个常量`html.fontsize`,这个在PC端布局会非常方便
  23. * 但是在移动端状态下,会非常麻烦,原因就是移动端屏幕非常多(375px- ?)
  24. * 所以,rem不能是是一个常量,必须是一个可以动态调整的数据
  25. * VW:视口比例单位,当前视口(手机宽度)不管多宽都是100VW
  26. * 所以,可以使用 `rem` + `vw`来实现动态 `rem`
  27. -->
  28. <!--
  29. * 三个视口
  30. * 1. 布局视口:面向开发者,与设备无关,默认980px,用`width`
  31. * 2. 视觉视口:与具体的便件相关,用户看到的手机屏幕大小
  32. * 3. 理想视口:抽象的,`width` = `device-width`,布局视口 = 视觉视口
  33. -->
  34. <!--
  35. * rem | vw
  36. * 1. 1vw = ?
  37. * 2. 1rem = ?
  38. * ----------------------------------------
  39. * DPR:设备像素比 = 设备像素 / 布局像素
  40. * iphone SE = iphone 6 (物理像素750px) , DPR =2
  41. * 750px / 350px(布局像素) = 2、
  42. * DPR 越大,屏幕越清楚
  43. * ----------------------------------------
  44. * 1rem = ?
  45. * 1rem = 100px = html.fontsize
  46. * iphone6 (375px):1rem = 100px = 3.75rem
  47. * iphone6: 1rem = 100px = 375px/3.75
  48. * iphone12: 1rem = 104px = 390px/3.75
  49. * iphone11max : 1rem = 110.4.px = 414px/3.75
  50. * 此时,rem 已经动态发生了变化,根据屏幕宽度
  51. * 此时 1vw 没变化,1vw = 3.75px
  52. * ----------------------------------------
  53. * 1vw = ?
  54. * iphone 6 = 375px = 100vw
  55. * 1vw = 1 / 100vw = 375px / 100 = 3.75px
  56. * 375px : 1vw = 3.75px
  57. -->
  58. <style>
  59. html {
  60. /* 动态计算rem */
  61. /* calc():计算函数,符号两边要留有空格 (+-/X) */
  62. /* font-size:calc(v1 - v2) */
  63. /* 1. 不管视口有多宽都用 100vw表示 */
  64. /* 2. 根据设计基准, 1vw = 3.75px */
  65. font-size:calc(100vw / 3.75px);
  66. }
  67. body {
  68. /* 将浏览器中的字号进行重置:16px */
  69. font-size: 0.16rem;
  70. }
  71. </style>
  72. </body>
  73. </html>

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论