Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1.移动端布局的基本思路与三种视口之间的关系 2. 实战手机页面的基本整体架构:页眉,页脚,主体等
Blogger Information
Blog 12
fans 0
comment 0
visits 9413
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
1.移动端布局的基本思路与三种视口之间的关系 2. 实战手机页面的基本整体架构:页眉,页脚,主体等
P粉355147598
Original
576 people have browsed it

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

移动端布局的基本思路

感觉只要确定好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. }
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