Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 移动端布局
Blogger Information
Blog 19
fans 0
comment 0
visits 8313
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
移动端布局
Wu.Ang
Original
377 people have browsed it

移动端布局

三个视口

  1. 布局视口:面向开发者,与设备无关,默认980px,用 width 表示
  2. 视觉视口:与具体设备硬件相关,用 deive-width 表示
  3. 理想视口:开始布局时,就用视觉视口布局,width = deive-width

在理想视口下,用户浏览页面时,不需要缩放,不需要拖动,原比例1:1显示 initial-scale=1.0

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <!-- meta:定义页面的"元数据" -->
  9.     <!-- name="viewport" 要解释的视口 -->
  10.     <!-- viewport = width=device-width, initial-scale=1.0 -->
  11.     <!-- width=device-width 布局视口 = 视觉视口 -->
  12.     <!-- initial-scale=1.0 原比例1:1显示,不要缩放 -->
  14.     <title>Document</title>
  15. </head>
  16. <body>
  18. </body>
  19. </html>
  1. 为什么要用 “rem”

rem引用的是<html>根元素的字号font-size的值,而一个页面只有一个根元素,所以可以保证rem的唯一性,此时在页面的任何地方,通过引用rem的值,可以计算出一个绝对值

  1. 1rem多大合适 : 1rem=100px

  2. 为什么rem不能写死

rem应该随着设备宽度而变化,不能是一个写死的值,设备宽度用”vw”表示,vw是一个相对值,可以很好地解决rem不能写死的问题,所以现在主流的移动端布局解决方案是:”rem+vw”

rem + vw 两大问题

  1. 1vw=?
    1. 当前iPhone6/11 : device-width = 375px
    2. 375px 就是当前设备的”视觉窗口” , 用100vw表示
    3. 1vw = 3.75px

  2. 1rem=?

    1. 1rem = 100px (人为) ==> html{font-size:100px;}

    2. 为什么 1rem = 100px

      1. 计算方便
      2. 插件推荐 : 插件默认是16px,其实还是为了计算”元素大小”方便,与字号无关
      3. 字号在<body>进行重置,或重新定义
    3. rem如果是绝对值100px,就失去了响应能力/自适应能力 , 通常设计师给的设计稿,为选择一个相对公认的通用宽度进行设计,一般用iPhone6的375px,所以应该将绝对值px ==> 相对值vw 进行表示/替换
  1. 1rem = 100px = 375px/3.75 
  2. iphone6/11: 375px/3.75 = 100px
  3. iphone12/13: 390px/3.75 > 100px
  4. iphone11max: 414px/3.75 > 100px
  6. 所以,应该将绝对值px ==> 相对值 vw 来进行表示/替代
  8. iphone6/11: 375px = 100vw
  9. iphone12/13: 390px = 100vw
  10. iphone11max: 414px = 100vw
  12. 无论手机屏幕有多宽,都可以用 100vw 来表示
  14. iphone6/11: 375px/3.75 = 100px = 1rem
  15. iphone12/13: 390px/3.75  104px = 1rem
  16. iphone11max: 414px/3.75 > 110.4px = 1rem
  18. 用vw 来动态的表示 rem 来实现响应式布局
  1. DPR : 设备像素比 = 设备像素 / css像素  =  750px / 375px = 2
  2. DPR = Device Pixel Ratio
  3. 布局一个重要的前提:与具体设备无关,面向逻辑页面布局,应该使用375px,可以根据dpr快速换算成物理像素
  4. 375px : 逻辑像素,面向开发者

布局实例

  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.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         html{
  15.             /* 100vw : 视觉窗口 */
  16.             font-size: calc(100vw / 3.75);
  17.         }
  18.         body{
  19.             font-size: 0.16rem;
  20.         }
  21.         @media (max-width : 375px) {
  22.             /* 视觉窗口小于375px时 */
  23.             html{
  24.                 /* 字号大小固定在14px */
  25.                 font-size: 87.5px;
  26.             }
  27.         }
  28.         @media (min-width : 470px) {
  29.             /* 视觉窗口大于470px时 */
  30.             html{
  31.                 /* 字号大小固定20px */
  32.                 font-size: 125px;
  33.             }
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <div>Hello</div>
  39. </body>
  40. </html>


Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
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