search

博客列表 >1.移动端布局的基本思路与三种视口之间的关系 2. 实战手机页面的基本整体架构:页眉,页脚,主体等

1.移动端布局的基本思路与三种视口之间的关系 2. 实战手机页面的基本整体架构:页眉,页脚,主体等

P粉355147598
P粉355147598原创
2022年03月31日 16:58:15573浏览

前言：应处于学习阶段，此篇内容可能理解有误，仅供参考，如大神有空，还请评论纠正。实战也是需要不断的看一眼源码，自己还是不能独立构造框架。

移动端布局的基本思路

感觉只要确定好1rem = ?, 1vw =?，与pc端无异啊。

  1. :root {
  2.     font-size: calc(100vw / 3.75);
  3. }

三种视口之间的关系

关系说不太清，布局视口就是默认980px做的网页，视觉就是我们在设备上能看到的内容，可以缩放，理想就是可以在设备上一次性看到整个网页，不能缩放。

实战代码和效果图

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>仿淘宝移动端首页-self</title>
  9.     <link rel="stylesheet" href="./css/reset.css">
  10.     <link rel="stylesheet" href="./css/header.css">
  11.     <link rel="stylesheet" href="./font_icon/iconfont.css">
  12.     <link rel="stylesheet" href="./css/footer.css">
  13.     <link rel="stylesheet" href="./css/main.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.                 <span class="iconfont icon-fangdajing"></span>
  26.                 <span>寻找宝贝店铺</span>
  27.             </div>
  28.         </div>
  29.         <!-- 轮播图 -->
  30.         <div class="slider"><img src="./images/banner/banner1.jpg" alt=""></div>
  32.         <!-- 导航 -->
  33.         <ul class="nav">
  34.             <li class="item">
  35.                 <a href=""><img src="images/nav/nav6.png" alt="" /></a>
  36.                 <a href="">天猫新品</a>
  37.             </li>
  38.             <li class="item">
  39.                 <a href=""><img src="images/nav/nav3.png" alt="" /></a>
  40.                 <a href="">今日爆款</a>
  41.             </li>
  42.             <li class="item">
  43.                 <a href=""><img src="images/nav/nav1.png" alt="" /></a>
  44.                 <a href="">天猫超市</a>
  45.             </li>
  46.             <li class="item">
  47.                 <a href=""><img src="images/nav/nav2.png" alt="" /></a>
  48.                 <a href="">充值中心</a>
  49.             </li>
  50.             <li class="item">
  51.                 <a href=""><img src="images/nav/nav5.png" alt="" /></a>
  52.                 <a href="">机票酒店</a>
  53.             </li>
  54.             <li class="item">
  55.                 <a href=""><img src="images/nav/nav8.png" alt="" /></a>
  56.                 <a href="">金币庄园</a>
  57.             </li>
  58.             <li class="item">
  59.                 <a href=""><img src="images/nav/nav7.png" alt="" /></a>
  60.                 <a href="">阿里拍卖</a>
  61.             </li>
  62.             <li class="item">
  63.                 <a href=""><img src="images/nav/nav4.png" alt="" /></a>
  64.                 <a href="">分类</a>
  65.             </li>
  66.             <li class="item">
  67.                 <a href=""><img src="images/nav/nav7.png" alt="" /></a>
  68.                 <a href="">阿里拍卖</a>
  69.             </li>
  70.             <li class="item">
  71.                 <a href=""><img src="images/nav/nav4.png" alt="" /></a>
  72.                 <a href="">分类</a>
  73.             </li>
  74.         </ul>
  75.     </header>
  76.     <!-- 主体 -->
  77.     <main style="height: 1600px">
  78.         <!-- 1. 聚划算 -->
  79.         <div class="top">
  80.             <div class="item jhs">
  81.                 <div class="box">
  82.                     <h3 class="title">聚划算</h3>
  83.                     <div class="desc">
  84.                         <h4>品牌折扣</h4>
  85.                         <img src="images/items/item1.png" alt="" />
  86.                     </div>
  87.                 </div>
  88.                 <div class="box">
  89.                     <!-- 用实体空格表示占位符 -->
  90.                     <h3 class="title">&nbsp;</h3>
  91.                     <div class="desc">
  92.                         <h4>划算好货</h4>
  93.                         <img src="images/items/item2.png" alt="" />
  94.                     </div>
  95.                 </div>
  96.                 <div class="box">
  97.                     <h3 class="title">淘抢购</h3>
  98.                     <div class="desc">
  99.                         <h4>限时半价</h4>
  100.                         <img src="images/items/item3.png" alt="" />
  101.                     </div>
  102.                 </div>
  103.                 <div class="box">
  104.                     <h3 class="title">天天特价</h3>
  105.                     <div class="desc">
  106.                         <h4>9.9包邮</h4>
  107.                         <img src="images/items/item4.png" alt="" />
  108.                     </div>
  109.                 </div>
  110.             </div>
  112.             <div class="item right">
  113.                 <div class="box">
  114.                     <h3 class="title">淘宝直播 <span class="tag" style="background-color: red">LIVE</span></h3>
  115.                     <div class="detail">
  116.                         <div class="left">
  117.                             <span class="title">好物传送门</span>
  118.                             <img src="images/items/item5.png" alt="" />
  119.                         </div>
  120.                         <div class="right">
  121.                             <img src="images/items/item6.png" alt="" />
  122.                         </div>
  123.                     </div>
  124.                 </div>
  125.                 <div class="box">
  126.                     <h3 class="title">有好货&nbsp;<span class="tag" style="background-color: skyblue">品质好物</span></h3>
  127.                     <div class="detail">
  128.                         <div class="left">
  129.                             <span class="title" style="color: skyblue">全民口碑推荐</span>
  130.                             <img src="images/items/item7.png" alt="" />
  131.                         </div>
  132.                         <div class="right">
  133.                             <img src="images/items/item21.png" alt="" />
  134.                         </div>
  135.                     </div>
  136.                 </div>
  137.             </div>
  138.             <div class="item right">
  139.                 <div class="box">
  140.                     <h3 class="title">每日好店 <span class="tag" style="background-color: orange">精选</span></h3>
  141.                     <div class="detail">
  142.                         <div class="left">
  143.                             <span class="title">深挖藏的店</span>
  144.                             <img src="images/items/item9.png" alt="" />
  145.                         </div>
  146.                         <div class="right">
  147.                             <img src="images/items/item10.png" alt="" />
  148.                         </div>
  149.                     </div>
  150.                 </div>
  151.             </div>
  152.             <div class="item right">
  153.                 <div class="box">
  154.                     <h3 class="title">哇哦视频<span class="tag" style="background-color: orange">亲测</span></h3>
  155.                     <div class="detail">
  156.                         <div class="left">
  157.                             <span class="title">粉丝都爱看</span>
  158.                             <img src="images/items/item11.png" alt="" />
  159.                         </div>
  160.                         <div class="right">
  161.                             <img src="images/items/item12.png" alt="" />
  162.                         </div>
  163.                     </div>
  164.                 </div>
  165.             </div>
  166.             <!-- 底部滚动显示文本 -->
  167.             <div class="item footer">
  168.                 <div class="title">淘宝头条</div>
  169.                 <div class="content">
  170.                     <span class="type">评测</span>
  171.                     <span style="font-size: larger">五款最强的防******</span>
  172.                 </div>
  173.             </div>
  174.         </div>
  175.         <!-- 2. 商品列表 -->
  176.         <div class="list"></div>
  177.     </main>
  178.     <!-- 尾部 -->
  179.     <footer>
  180.         <div class="item active">
  181.             <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  182.         </div>
  183.         <div class="item">
  184.             <a href="" class="iconfont icon-gouwuche"></a>
  185.             <a href="">购物车</a>
  186.         </div>
  187.         <div class="item">
  188.             <a href="" class="iconfont icon-wodetaobao"></a>
  189.             <a href="">我的淘宝</a>
  190.         </div>
  191.     </footer>
  192. </body>
  194. </html>

css

  1. /* 样式重置 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  10. /* 链接 */
  12. a {
  13.     text-decoration: none;
  14.     color: #555;
  15. }
  18. /* 列表 */
  20. li {
  21.     list-style: none;
  22. }
  24. :root {
  25.     font-size: calc(100vw / 3.75);
  26. }
  28. body {
  29.     font-size: 0.12rem;
  30.     color: #333;
  31.     max-width: 700px;
  32.     min-width: 320px;
  33.     margin: auto;
  34.     background-color: #f4f4f4;
  35. }
  37. @media screen and (max-width: 320px) {
  38.      :root {
  39.         font-size: 85px;
  40.     }
  41. }
  43. @media screen and (min-width: 640px) {
  44.      :root {
  45.         font-size: 170px;
  46.     }
  47. }
  48. /* 头部 */
  49. header {
  50.     position: relative;
  51. }
  53. /* 头部-->顶部 */
  55. header .top {
  56.     /* position: fixed;
  57.     display: grid;
  58.     grid-template-columns: .3rem 1fr;
  59.     width: 100vw;
  60.     top: 0;
  61.     left: 0;
  62.     right: 0;
  63.     background-color: #fd7c52;
  64.     place-items: center;
  65.     padding: .05rem;
  66.     z-index: 99; */
  67.     width: 100vw;
  68.     background-color: coral;
  69.     position: fixed;
  70.     top: 0;
  71.     left: 0;
  72.     right: 0;
  73.     display: grid;
  74.     grid-template-columns: 0.35rem 1fr;
  75.     padding: 0.03rem;
  76.     place-items: center;
  77.     /* 调整显示层级 */
  78.     z-index: 99;
  80. }
  82. /* logo */
  84. header .logo {
  85.     font-size: .3rem;
  86.     color: #fff;
  87.     margin-left: .01rem;
  88. }
  90. /* 搜索框 */
  92. header .search {
  93.     color: #fff;
  94.     background-color: #fd3e05;
  95.     width: 95%;
  96.     text-align: center;
  97.     border-radius: .05rem;
  98.     padding: .03rem;
  99. }
  101. /* 轮播图 */
  102. header .slider {
  103.     position: absolute;
  104.     height: 1rem;
  105.     top: .37rem;
  106. }
  107. header .slider img ,
  108. header .nav img {
  109.     width: 100%;
  110. }
  112. /* 导航栏 */
  113. header .nav {
  114.     position: absolute;
  115.     top: calc(.4rem + 1rem + .1rem);
  116.     display: grid;
  117.     grid-template-columns: repeat(5 , 1fr);
  118.     place-items: center;
  119.     place-content: center;
  120.     background-color: #fff;
  121.     padding-top: .1rem;
  122. }
  124. header .nav .item {
  125.     display: grid;
  126.     padding: .05rem;
  127.     place-items: center;
  128. }
  129. header .nav .item a {
  130.     padding: 0 0.05rem;
  131. }
  132. main {
  133.     position: relative;
  134.     top: calc(0.37rem + 1.25rem + 1.5rem);
  135.     padding: 0.1rem;
  136. }
  138. main img {
  139.     width: 100%;
  140.     height: 100%;
  141. }
  143. main .top {
  144.     background-color: #fff;
  145.     border-radius: 0.1rem;
  146.     min-height: 3rem;
  147.     /* 3行2列 */
  148.     display: grid;
  149.     grid-template-columns: repeat(2, 1fr);
  150.     gap: 0.1rem;
  151.     padding: 0.1rem;
  152. }
  155. /* 最后一行,跨2列 */
  157. main .top .item:last-of-type {
  158.     grid-column: span 2;
  159.     /* background-color: yellow; */
  160. }
  163. /* 左上角的聚划算 */
  165. main .top .item.jhs {
  166.     display: grid;
  167.     grid-template-columns: repeat(2, 1fr);
  168.     gap: 0.1rem;
  169. }
  171. main .top .item.jhs .box {
  172.     display: grid;
  173.     gap: 0.1rem;
  174. }
  176. main .top .item.jhs .box .desc {
  177.     display: grid;
  178.     background-color: rgb(243, 235, 236);
  179.     border-radius: 0.1rem;
  180.     padding: 0.1rem;
  181. }
  184. /* 右侧, 上下二组 */
  186. main .top .item.right {
  187.     display: grid;
  188.     gap: 0.1rem;
  189. }
  191. main .top .item.right .box {
  192.     display: grid;
  193. }
  195. main .top .item.right .box .title {
  196.     grid-column: span 2;
  197. }
  199. main .top .item.right .box .title .tag {
  200.     color: #fff;
  201.     font-weight: normal;
  202.     padding: 1px;
  203.     border-radius: 0.05rem;
  204.     font-size: smaller;
  205. }
  207. main .top .item.right .box .detail {
  208.     display: grid;
  209.     grid-template-columns: repeat(2, 1fr);
  210. }
  212. main .top .item.right .box .detail .left {
  213.     display: grid;
  214. }
  217. /* 底部公告 */
  219. main .item.footer {
  220.     display: grid;
  221.     grid-template-columns: 0.6rem 1fr;
  222.     padding: 0.1rem 0;
  223. }
  225. main .item.footer .type {
  226.     background-color: rgb(238, 202, 206);
  227.     color: darkorange;
  228.     padding: 2px 5px;
  229.     border-radius: 3px;
  230. }
  232. main .item.footer .title {
  233.     font-size: larger;
  234.     font-weight: bolder;
  235. }footer {
  236.     width: 100vw;
  237.     height: 0.46rem;
  238.     background-color: #fff;
  239.     position: fixed;
  240.     bottom: 0;
  241.     left: 0;
  242.     right: 0;
  243.     display: grid;
  244.     grid-template-columns: repeat(3, 1fr);
  245.     place-items: center;
  246. }
  248. footer .item {
  249.     display: grid;
  250.     place-items: center;
  251. }
  253. footer .item .iconfont {
  254.     font-size: 0.2rem;
  255. }
  257. footer .item.active .iconfont {
  258.     font-size: 0.36rem;
  259.     color: coral;
  260. }
上一条：淘宝移动端首页的商品列表下一条：常用函数类型和数据类型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议