ASCII码 ASCII码

移动端布局基本思路，三种视口、手机页面3部分基本架构

发布于：2022-04-18 13:34:16  栏目：技术文档

移动端布局基本思路、三种视口，手机页面3部分基本架构

1.移动端布局知识点

1. 重要术语

序号 名称 描述
1 像素 图像显示最小单位,PPI(像素分辨率)
2 DPR 设备像素比 = 设备像素 / CSS 像素
3 视口 可视窗口 viewport,分布局/视觉/理想三类

2. 三种视口描述

三种视口类型是人为的划分，我们只需要考虑理想视口

序号 名称 描述
1 布局视口Layout viewport 设备无关, 通常默认980px,显示完整网页
2 视觉视口visual viewport 设备相关,用户手机屏幕可见部分,通过缩放查看全部
3 理想视口idea viewport 不必缩放就可查看全部,针对移动端进行布局

3. 解决方案

视口属性:<meta name="viewport" content="width=device-width, initial-scale=1.0" />

序号 属性值 描述
1 width=device-width 布局视图 = 视觉视图
2 initial-scale=1.0 视觉视图 = 理想视图

移动端布局单位很多,经典的百分比,em 等,但目前主流单位是: rem + vw,也称”rem-vw`解决方案

4. 推荐 vscode 插件

  1. 名称: px to rem & rpx,原名为cssrem
  2. 自动将px换算为rem
  3. 须在插件中设置1rem = ...px,默认为16px,通常设置为1rem=100px以方便计算

5. 操作步骤

布局前,必须先确定 1rem = ?, 1vw =?

1vw = ?" class="reference-link">5.1 1vw = ?

  1. 选择某款手机做为理想视口的基础,如iPhone11: 375px
  2. 100vw = 100% = 375px, 所以 1vw = 3.75px

1rem = ?" class="reference-link">5.2 1rem = ?

  1. 1rem 默认为浏览器字号16px
  2. 推荐: 1rem = 100px
  3. 1rem不要在<html>中写死, 应该通过100vw计算出来

在css中可以这样来写

  1. /* :root 等同于 html */
  2. :root {
  3.     /* 自动计算 */
  4.     font-size: calc(100vw / 3.75);
  5. }
  7. body {
  8.     font-size: 0.12rem;
  9. }

5.3 总结

序号 属性值 描述
1 1vw = 3.75px 以iPhone6/11屏幕宽度为基准
2 1rem = 100vw / 3.75 即1rem = 100px, 方便计算

注意：具体根据实际情况调整，如果美工给的是750px的宽度的UI，那么根据上面的计算，我们可以推测出来100vw=100%=750px，那么默认浏览器字号则可以设置为 1rem = 50px

2.手机页面3部分基本架构

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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="font_icon/iconfont.css" />
  9.     <link rel="stylesheet" href="css/reset.css" />
  10.     <link rel="stylesheet" href="css/header.css" />
  11.     <link rel="stylesheet" href="css/footer.css" />
  12. </head>
  13. <body>
  14. <!-- 三部分基本架构 头部、主体、底部（好像PC页面主要也是这3部分构成） -->
  15. <body>
  16.     <!-- 页眉 -->
  17.     <header>
  18.         <!-- 顶部 -->
  19.         <div class="top">
  20.             <!-- logo -->
  21.             <div class="logo iconfont icon-shejiaotubiao-08"></div>
  22.             <!-- 搜索框 -->
  23.             <div class="search">
  24.                 <div class="key">
  25.                     <span class="iconfont icon-fangdajing"></span>
  26.                     <span>寻找宝贝店铺</span>
  27.                 </div>
  28.             </div>
  29.         </div>
  30.         <!-- 轮播图 -->
  31.         <div class="slider">
  32.             <a href=""><img src="images/banner/banner1.jpg" alt=""></a>
  33.         </div>
  34.         <!-- 导航组 -->
  35.         <ul class="nav">
  36.             <li class="item">
  37.                 <a href=""><img src="images/nav/nav6.png"alt=""></a>
  38.                 <a href="">天猫新品</a>
  39.             </li>
  40.             <li class="item">
  41.                 <a href=""><img src="images/nav/nav3.png" alt=""></a>
  42.                 <a href="">今日爆款</a>
  43.             </li>
  44.             <li class="item">
  45.                 <a href=""><img src="images/nav/nav1.png" alt=""></a>
  46.                 <a href="">天猫超市</a>
  47.             </li>
  48.             <li class="item">
  49.                 <a href=""><img src="images/nav/nav2.png" alt=""></a>
  50.                 <a href="">充值中心</a>
  51.             </li>
  52.             <li class="item">
  53.                 <a href=""><img src="images/nav/nav5.png" alt=""></a>
  54.                 <a href="">机票酒店</a>
  55.             </li>
  56.         </ul>
  57.     </header>
  58.     <!-- 主体 -->
  59.     <main style="height: 800px; background-color: brown;">
  60.         <!-- 这里是主体内容区 -->
  61.     </main>
  62.     <!-- 底部 -->
  63.     <footer>
  64.         <div class="item active">
  65.             <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  66.         </div>
  67.         <div class="item">
  68.             <a href="" class="iconfont icon-gouwuche"></a>
  69.             <a href="">购物车</a>
  70.         </div>
  71.         <div class="item">
  72.             <a href="" class="iconfont icon-wodetaobao"></a>
  73.             <a href="">我的淘宝</a>
  74.         </div>
  75.     </footer>
  76. </body>
  77. </html>

效果图

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行