search

博客列表 >移动布局原理、实战手机页面的基本整体架构页眉,页脚,主体。

移动布局原理、实战手机页面的基本整体架构页眉,页脚,主体。

愿情的博客
愿情的博客原创
2022年03月29日 19:59:35978浏览

移动布局原理

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 =?

5.1 1vw = ?

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

5.2 1rem = ?

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

5.3 总结

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

实战手机页面的基本整体架构页眉,页脚,主体

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="font_icon/iconfont.css" />
  10.     <link rel="stylesheet" href="css/reset.css" />
  11.     <link rel="stylesheet" href="css/header.css" />
  12.     <link rel="stylesheet" href="css/footer.css" />
  13.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3284190_nrlg22mwpjp.css">
  14. </head>
  16. <body>
  17.     <!-- 头部 -->
  18.     <header>
  19.         <!-- 顶部 -->
  20.         <div class="top">
  21.             <!-- logo -->
  22.             <div class="logo iconfont icon-shejiaotubiao-08"></div>
  23.             <!-- 搜索框 -->
  24.             <div class="search">
  25.                 <div class="keys">
  26.                     <span class="iconfont icon-fangdajing"></span>
  27.                     <span>寻找宝贝店铺</span>
  28.                 </div>
  29.             </div>
  30.         </div>
  31.         <!-- 轮播图 -->
  32.         <div class="slider">
  33.             <a href=""><img src="images/banner/banner1.jpg" alt="" /></a>
  34.         </div>
  35.         <!-- 导航组 -->
  36.         <ul class="nav">
  37.             <li class="item">
  38.                 <a href=""><img src="images/nav/nav6.png" alt="" /></a>
  39.                 <a href="">天猫新品</a>
  40.             </li>
  41.             <li class="item">
  42.                 <a href=""><img src="images/nav/nav3.png" alt="" /></a>
  43.                 <a href="">今日爆款</a>
  44.             </li>
  45.             <li class="item">
  46.                 <a href=""><img src="images/nav/nav1.png" alt="" /></a>
  47.                 <a href="">天猫超市</a>
  48.             </li>
  49.             <li class="item">
  50.                 <a href=""><img src="images/nav/nav2.png" alt="" /></a>
  51.                 <a href="">充值中心</a>
  52.             </li>
  53.             <li class="item">
  54.                 <a href=""><img src="images/nav/nav5.png" alt="" /></a>
  55.                 <a href="">机票酒店</a>
  56.             </li>
  57.             <li class="item">
  58.                 <a href=""><img src="images/nav/nav8.png" alt="" /></a>
  59.                 <a href="">金币庄园</a>
  60.             </li>
  61.             <li class="item">
  62.                 <a href=""><img src="images/nav/nav7.png" alt="" /></a>
  63.                 <a href="">阿里拍卖</a>
  64.             </li>
  65.             <li class="item">
  66.                 <a href=""><img src="images/nav/nav4.png" alt="" /></a>
  67.                 <a href="">分类</a>
  68.             </li>
  69.             <li class="item">
  70.                 <a href=""><img src="images/nav/nav7.png" alt="" /></a>
  71.                 <a href="">阿里拍卖</a>
  72.             </li>
  73.             <li class="item">
  74.                 <a href=""><img src="images/nav/nav4.png" alt="" /></a>
  75.                 <a href="">分类</a>
  76.             </li>
  77.         </ul>
  78.     </header>
  81.     <!-- 主体 -->
  82.     <main style="height: 1600px" ">
  83. <div class="main-courses"><h3>天猫超市</h3>
  84.     <div>
  86.         <ul class="main-courses">
  87.             <li class="item">
  88.               <a href=""><img src="static/images/man/1.webp" alt="" /></a>
  89.               <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  90.               <div class="price">
  91.                 <div class="iconfont icon-rmb">15838</div>
  94.               </div>
  95.             </li>
  96.             <li class="item">
  97.               <a href=""><img src="static/images/man/2.webp" alt="" /></a>
  98.               <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  99.               </p>
  100.               <div class="price">
  101.                 <div class="iconfont icon-rmb">203</div>
  104.               </div>
  105.             </li>
  106.             <li class="item">
  107.               <a href=""><img src="static/images/man/3.webp" alt="" /></a>
  108.               <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  109.               <div class="price">
  110.                 <div class="iconfont icon-rmb">203</div>
  113.               </div>
  114.             </li>
  115.             <li class="item">
  116.               <a href=""><img src="static/images/man/4.webp" alt="" /></a>
  117.               <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  118.               <div class="price">
  119.                 <div class="iconfont icon-rmb">203</div>
  122.               </div>
  123.             </li>
  124.             <li class="item">
  125.               <a href=""><img src="static/images/man/5.webp" alt="" /></a>
  126.               <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  127.               <div class="price">
  128.                 <div class="iconfont icon-rmb">203</div>
  131.               </div>
  132.             </li>
  134.           </ul>
  135.     </div>
  136. </div>
  138.               </main>
  141.     <!-- 底部 -->
  142.     <footer>
  143.         <div class="item active">
  144.             <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  145.         </div>
  146.         <div class="item">
  147.             <a href="" class="iconfont icon-gouwuche"></a>
  148.             <a href="">购物车</a>
  149.         </div>
  150.         <div class="item">
  151.             <a href="" class="iconfont icon-wodetaobao"></a>
  152.             <a href="">我的淘宝</a>
  153.         </div>
  154.     </footer>
  155. </body>
  157. </html>
上一条：移动端布局学习小结与实践下一条：仿PHP中文网首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多