博客列表 >三个视口与移动端布局的理解

三个视口与移动端布局的理解

Pharaoh
Pharaoh原创
2022年07月16日 15:53:42615浏览

三个视口

想要深入理解视口首先要知道什么是物理像素,什么是CSS像素/设备独立像素(density-independent pixel)以及什么是设备像素比

  • 物理像素(physical pixel)一个像素是设备屏幕上最小的物理显示单元,每个像素都有自己的颜色值和亮度,同一个设备它的物理像素是固定的,即它的分辨率是固定的

  • CSS像素/设备独立像素(density-independent pixel)在iphone3上,CSS像素和设备的物理像素是相等的,随着科技发展,手机的尺寸没有太大的变化,但是屏幕的像素密度越来越大了,这意味着相同大小的屏幕上,像素多了1倍,如果还按照1:1显示,就会很小,阅读使用很不方便,所以在高像素密度的设备上,多个物理像素=1个CSS像素,这也是为什么手机物理像素是750,屏幕显示的却是375的原因,因为设备像素比是2,所以一个CSS像素=两个物理像素

  • 设备像素比=物理像素/CSS像素,例如设备像素比(DPR)等于2,那么一个CSS像素 = 两个物理像素,这样就不会出现上面说的阅读不方便的问题

以电脑的2K显示器为例,windosw设置中的缩放与布局当作设备像素比
如果我们不缩放,这个时候1个css像素就=1个物理像素,我的显示器尺寸只有17寸,这样浏览网站就很不方便,见下图:


我们把设备像素比改为150%,也就是1.5,这个时候1个css像素=1.5个物理像素再来看:

明显更方便阅读了,这时可以理解为,我的屏幕物理像素还是2K,只不过我设置了设备像素比,CSS的1px = 显示器的1.5px

视口

视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

布局视口

面向开发者,可以看作是CSS布局时的画布,一般默认980px

视觉视口

终端设备看到的区域,如果布局视口大于视觉视口,用户只能通过缩小,滑动来观看

理想视口

理想视口就是布局视口的宽度应该与视觉视口的宽度一致。简单理解就是设备有多宽,我们布局的视口就多宽

<meta>标签拓展:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>

width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例

移动布局

因为手机样式繁多,屏幕的分辨率各不相同,开发者需要让页面自适应客户终端的大小,所以我们不能用绝对值来开发页面,用相对值是最好的解决办法:

  1. 我们需要先把根元素的字号设置成相对值,布局的时候使用REM单位根据客户设备像素大小来自适应

  2. 重置主体元素的字号大小,以免根元素字号的大小影响到字体大小

代码实例

  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. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>移动布局</title>
  8. <link rel="stylesheet" href="demo.css" />
  9. </head>
  10. <body>
  11. <div class="header">
  12. <ul>
  13. <li><a href="">首页</a></li>
  14. <li><a href="">家居用品</a></li>
  15. <li><a href="">男装</a></li>
  16. <li><a href="">女装</a></li>
  17. <li><a href="">家用电器</a></li>
  18. </ul>
  19. </div>
  20. <div class="main">
  21. <div class="content">
  22. <div class="left">
  23. <ul>
  24. <li><a href="">广告</a></li>
  25. <li><a href="">广告</a></li>
  26. <li><a href="">广告</a></li>
  27. <li><a href="">广告</a></li>
  28. </ul>
  29. </div>
  30. <div class="middel">
  31. <div>
  32. <div><img src="phpkjkf.png" alt="" /></div>
  33. <p>推荐产品</p>
  34. </div>
  35. <div>
  36. <div><img src="phpkjkf.png" alt="" /></div>
  37. <p>推荐产品</p>
  38. </div>
  39. <div>
  40. <div><img src="phpkjkf.png" alt="" /></div>
  41. <p>推荐产品</p>
  42. </div>
  43. <div>
  44. <div><img src="phpkjkf.png" alt="" /></div>
  45. <p>推荐产品</p>
  46. </div>
  47. <div>
  48. <div><img src="phpkjkf.png" alt="" /></div>
  49. <p>推荐产品</p>
  50. </div>
  51. <div>
  52. <div><img src="phpkjkf.png" alt="" /></div>
  53. <p>推荐产品</p>
  54. </div>
  55. <div>
  56. <div><img src="phpkjkf.png" alt="" /></div>
  57. <p>推荐产品</p>
  58. </div>
  59. <div>
  60. <div><img src="phpkjkf.png" alt="" /></div>
  61. <p>推荐产品</p>
  62. </div>
  63. </div>
  64. <div class="right">
  65. <ul>
  66. <li><a href="">广告</a></li>
  67. <li><a href="">广告</a></li>
  68. <li><a href="">广告</a></li>
  69. <li><a href="">广告</a></li>
  70. </ul>
  71. </div>
  72. </div>
  73. </div>
  74. </body>
  75. </html>
  76. /* CSS文件 */
  77. * {
  78. margin: 0;
  79. padding: 0;
  80. list-style: none;
  81. text-decoration: none;
  82. }
  83. html {
  84. /*
  85. 100vw=设备独立像素
  86. 当设备独立像素=375的时候除以3.75
  87. 正好等于100px,方便布局计算
  88. */
  89. font-size: calc(100vw / 3.75);
  90. }
  91. body {
  92. /* 重置字体大小,以免根元素的字号影响到字体 */
  93. font-size: 0.16rem;
  94. background-color: darkgray;
  95. }
  96. body .header ul {
  97. height: 0.4rem;
  98. display: flex;
  99. justify-content: space-around;
  100. align-items: center;
  101. background-color: rgb(255, 255, 255);
  102. }
  103. body .header ul li a {
  104. color: black;
  105. }
  106. body .main .content {
  107. width: 3.75rem;
  108. display: flex;
  109. margin: auto;
  110. justify-content: center;
  111. }
  112. body .main .content .middel {
  113. width: 2.4rem;
  114. height: 1.2rem;
  115. display: grid;
  116. grid-template-columns: repeat(4, 0.6rem);
  117. grid-template-rows: 0.6rem;
  118. }
  119. body .main .content .left ul,
  120. body .main .content .right ul {
  121. width: 0.4rem;
  122. height: 1rem;
  123. font-size: 0.1rem;
  124. background-color: coral;
  125. }
  126. body .main .content .middel > div {
  127. width: 0.6rem;
  128. height: 0.6rem;
  129. display: flex;
  130. flex-direction: column;
  131. align-items: center;
  132. justify-content: center;
  133. }
  134. body .main .content .middel > div > div {
  135. width: 50%;
  136. height: 50%;
  137. }
  138. body .main .content .middel div img {
  139. width: 100%;
  140. }
  141. body .main .content .middel div p {
  142. font-size: 0.1rem;
  143. }
  144. body .main .content .left,
  145. body .main .content .right {
  146. display: none;
  147. }
  148. /* 设备宽度大于500px的时候弹出广告栏 */
  149. @media (min-width: 500px) {
  150. body .main .content .left,
  151. body .main .content .right {
  152. display: block;
  153. }
  154. }
  155. /* 限制字体到20px左右就要限制 */
  156. @media (min-width: 470px) {
  157. html {
  158. font-size: 125px;
  159. }
  160. }
  161. /* 限制字体最小像素,以免用户看不清楚 */
  162. @media (max-width: 250px) {
  163. html {
  164. font-size: 87.5px;
  165. }
  166. }
上一条:php.cn右侧布局下一条:0714 布局
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议