Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 移动端布局学习小结与实践
Blogger Information
Blog 29
fans 0
comment 0
visits 14071
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
移动端布局学习小结与实践
P粉317509817
Original
354 people have browsed it

移动端布局知识点

序号 名称 描述
1 像素 图像显示最小单位,PPI(像素分辨率)
2 DPR 设备像素比 = 设备像素 / CSS 像素
3 视口 可视窗口 viewport,分布局/视觉/理想三类
序号 名称 描述
1 布局视口Layout viewport 设备无关, 通常默认980px,显示完整网页
2 视觉视口visual viewport 设备相关,用户手机屏幕可见部分,通过缩放查看全部
3 理想视口idea viewport 不必缩放就可查看全部,针对移动端进行布局
序号 属性值 描述
1 width=device-width 布局视图 = 视觉视图
2 initial-scale=1.0 视觉视图 = 理想视图
序号 属性值 描述
1 1vw = 3.75px 以iPhone6/11屏幕宽度为基准
2 1rem = 100vw / 3.75 即1rem = 100px, 方便计算

淘宝页面仿写

html

  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.     <link rel="stylesheet" href="icon_font/iconfont.css" />
  8.     <link rel="stylesheet" href="css/reset.css" />
  9.     <link rel="stylesheet" href="css/header.css" />
  10.     <link rel="stylesheet" href="css/footer.css">
  11.     <link rel="stylesheet" href="css/main.css">
  12.     <title>淘宝移动端仿写</title>
  13. </head>
  14. <body>
  15.     <!-- 页眉 -->
  16.     <header>
  17.         <!-- 顶部 -->
  18.         <div class="top">
  19.             <!-- logo -->
  20.             <div class="logo iconfont icon-shejiaotubiao-08"></div>
  21.             <!-- 搜索框 -->
  22.             <div class="search">
  23.                 <div class="key">
  24.                     <span class="iconfont icon-fangdajing"></span>
  25.                     <span>寻找宝贝店铺</span>
  26.                 </div>
  27.             </div>
  28.         </div>
  29.         <!-- 轮播图 -->
  30.         <div class="slider">
  31.             <a href=""><img src="images/banner/banner1.jpg" alt=""></a>
  32.         </div>
  33.         <!-- 导航组 -->
  34.         <ul class="nav">
  35.             <li class="item">
  36.                 <a href=""><img src="images/nav/nav6.png"alt=""></a>
  37.                 <a href="">天猫新品</a>
  38.             </li>
  39.             <li class="item">
  40.                 <a href=""><img src="images/nav/nav3.png" alt=""></a>
  41.                 <a href="">今日爆款</a>
  42.             </li>
  43.             <li class="item">
  44.                 <a href=""><img src="images/nav/nav1.png" alt=""></a>
  45.                 <a href="">天猫超市</a>
  46.             </li>
  47.             <li class="item">
  48.                 <a href=""><img src="images/nav/nav2.png" alt=""></a>
  49.                 <a href="">充值中心</a>
  50.             </li>
  51.             <li class="item">
  52.                 <a href=""><img src="images/nav/nav5.png" alt=""></a>
  53.                 <a href="">机票酒店</a>
  54.             </li>
  55.             <li class="item">
  56.                 <a href=""><img src="images/nav/nav8.png" alt=""></a>
  57.                 <a href="">金币庄园</a>
  58.             </li>
  59.             <li class="item">
  60.                 <a href=""><img src="images/nav/nav7.png" alt=""></a>
  61.                 <a href="">阿里拍卖</a>
  62.             </li>
  63.             <li class="item">
  64.                 <a href=""><img src="images/nav/nav4.png" alt=""></a>
  65.                 <a href="">分类</a>
  66.             </li>
  67.         </ul>
  68.     </header>
  69.     <main>
  70.         <div class="goods-nav">
  71.             <div class="juhuasuan">
  72.                 <div class="context ">
  73.                     <span class="title">聚划算</span>
  74.                     <a href=""class="pingpaizhekou">
  75.                         <span>品牌折扣</span>
  76.                         <img src="images/items/item1.png" alt="">
  77.                     </a> 
  78.                     <a href="" class="huasuanhaowu">
  79.                         <span>划算好物</span>
  80.                         <img src="images/items/item2.png" alt="">
  81.                     </a>
  82.                 </div>
  83.             </div>
  84.             <div class="juhuasuan">
  85.                 <div class="context">
  86.                     <span class="title">聚划算</span>
  87.                     <a href=""class="pingpaizhekou">
  88.                         <span>品牌折扣</span>
  89.                         <img src="images/items/item1.png" alt="">
  90.                     </a> 
  91.                     <a href="" class="huasuanhaowu">
  92.                         <span>划算好物</span>
  93.                         <img src="images/items/item2.png" alt="">
  94.                     </a>
  95.                 </div>
  96.             </div>
  97.             <div class="juhuasuan">
  98.                 <div class="context">
  99.                     <span class="title">聚划算</span>
  100.                     <a href=""class="pingpaizhekou">
  101.                         <span>品牌折扣</span>
  102.                         <img src="images/items/item1.png" alt="">
  103.                     </a> 
  104.                     <a href="" class="huasuanhaowu">
  105.                         <span>划算好物</span>
  106.                         <img src="images/items/item2.png" alt="">
  107.                     </a>
  108.                 </div>
  109.             </div>
  110.             <div class="juhuasuan">
  111.                 <div class="context">
  112.                     <span class="title">聚划算</span>
  113.                     <a href=""class="pingpaizhekou">
  114.                         <span>品牌折扣</span>
  115.                         <img src="images/items/item1.png" alt="">
  116.                     </a> 
  117.                     <a href="" class="huasuanhaowu">
  118.                         <span>划算好物</span>
  119.                         <img src="images/items/item2.png" alt="">
  120.                     </a>
  121.                 </div>
  122.             </div>
  123.             <div class="juhuasuan">
  124.                 <div class="context">
  125.                     <span class="title">聚划算</span>
  126.                     <a href=""class="pingpaizhekou">
  127.                         <span>品牌折扣</span>
  128.                         <img src="images/items/item1.png" alt="">
  129.                     </a> 
  130.                     <a href="" class="huasuanhaowu">
  131.                         <span>划算好物</span>
  132.                         <img src="images/items/item2.png" alt="">
  133.                     </a>
  134.                 </div>
  135.             </div>
  136.             <div class="juhuasuan">
  137.                 <div class="context">
  138.                     <span class="title">聚划算</span>
  139.                     <a href=""class="pingpaizhekou">
  140.                         <span>品牌折扣</span>
  141.                         <img src="images/items/item1.png" alt="">
  142.                     </a> 
  143.                     <a href="" class="huasuanhaowu">
  144.                         <span>划算好物</span>
  145.                         <img src="images/items/item2.png" alt="">
  146.                     </a>
  147.                 </div>
  148.             </div>        
  150.         </div>
  151.         <div class="bottom">
  152.             <div class="context">
  153.                 <span style="font-size: 0.2rem; font-weight:0.5rem;margin:0.1rem;">淘宝头条</span>
  154.                 <span><em style="background-color: coral;color: aliceblue;font-size: normal;border-radius: 0.05rem;padding: auto;margin: auto;">摄影</em>摄影xxxxxxx</span>
  155.             </div>
  156.         </div>
  158.     </main>
  159.     <footer>
  160.         <div class="item active">
  161.             <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  162.         </div>
  163.         <div class="item">
  164.             <a href="" class="iconfont icon-gouwuche"></a>
  165.             <a href="">购物车</a>
  166.         </div>
  167.         <div class="item">
  168.             <a href="" class="iconfont icon-wodetaobao"></a>
  169.             <a href="">我的淘宝</a>
  170.         </div>
  171.     </footer>
  172. </body>
  173. </html>

css

  1. header {
  2.     position: relative;
  3. }
  5. header .top {
  6.     width: 100vw;
  7.     background-color: coral;
  8.     position: fixed;
  9.     top: 0;
  10.     left: 0;
  11.     right: 0;
  12.     display: grid;
  13.     grid-template-columns: 0.35rem 1fr;
  14.     padding: 0.05rem;
  15.     /* 调整显示层级 */
  16.     z-index: 99;
  17. }
  19. header .top .logo {
  20.     color: white;
  21.     font-size: 0.25rem;
  22. }
  24. header .top .search {
  25.     background-color: orangered;
  26.     color: #eee;
  27.     display: grid;
  28.     place-content: center;
  29.     border-radius: 0.05rem;
  30.     font-size: small;
  31. }
  32. .slider{
  33.     height: 1.25rem;
  34.     position: absolute;
  35.     top: 0.35rem;
  36. }
  37. .slider img,
  38. .nav img{
  39.     width: 100%;
  40.     height: 100%;
  41. }
  42. header .nav {
  43.     background-color: #fff;
  44.     position: absolute;
  45.     top: calc(0.35rem + 1.25rem);
  46.     display: grid;
  47.     grid-template-columns: repeat(5, 1fr);
  48.     font-size: 0.11rem;
  49.     /* padding: 0.2rem 0.1rem; */
  50.     column-gap: 0.05rem;
  51.     row-gap: 0.1rem;
  52.     margin-top: .06rem;
  53. }
  55. header .nav .item {
  56.     display: grid;
  57.     place-items: center;
  58.     padding: 0.05rem 0.05rem;
  59. }
  61. header .nav .item a {
  62.     padding: 0 0.05rem;
  63. }
  65. footer {
  66.     width: 100vw;
  67.     height: 0.46rem;
  68.     background-color: #fff;
  69.     position: fixed;
  70.     bottom: 0;
  71.     left: 0;
  72.     right: 0;
  73.     display: grid;
  74.     grid-template-columns: repeat(3, 1fr);
  75.     place-items: center;
  76. }
  78. footer .item {
  79.     display: grid;
  80.     place-items: center;
  81. }
  83. footer .item .iconfont {
  84.     font-size: 0.2rem;
  85. }
  87. footer .item.active .iconfont {
  88.     font-size: 0.36rem;
  89.     color: coral;
  90. }
  92. main {
  93.     position:relative;
  94. }
  95. main .goods-nav{
  96.     /* background-color: #fff; */
  97.     margin:auto;
  99.     position: absolute;
  100.     top: calc(0.36rem + 1.3rem + 1.52rem);
  101.     display: grid;
  102.     grid-template-columns: repeat(2, 1.86rem);
  103.     grid-template-rows: repeat(3, 1.26rem);
  104.     column-gap: 0.02rem;
  105. }
  107. main .goods-nav .juhuasuan{
  108.     background-color: #fff;
  109. }
  110. main .goods-nav .juhuasuan .context{
  111.     display: grid;
  112.     grid-template-columns: repeat(2,1fr);
  113.     grid-template-rows: 0.26rem 1rem;
  114.     place-content: center;
  115.     place-items: center;
  116. }
  117. main .goods-nav .juhuasuan .context span {
  118.     font-weight: bolder;
  119. }
  120. main .goods-nav .juhuasuan .context .title {
  121.     grid-column: span 2;
  122.     font-size: large;
  123.     font-weight: bolder;
  124.     place-self: start;
  125.     padding: 0 0 0 0.03rem;
  126.     margin-left: 0.1rem;
  127. }
  128. main .goods-nav img{
  129.     width: 100%;
  130.     height: 100%;
  131. }
  132. main .goods-nav .context .pingpaizhekou {
  133.     place-self: center;
  134.     background-color:rgb(255,127,80,0.2);
  135.     border-radius: 0.05rem;
  136.     margin-left: 0.1rem;
  137.     margin-right: 0.04rem;
  138. }
  139. main .goods-nav .context .pingpaizhekou span{
  140.     margin: 0.1rem;
  141.     padding: auto;
  142.     font-weight: bolder;
  143.     /* color: darkpink; */
  144. }
  145. main .goods-nav .context .huasuanhaowu {
  146.     place-self: center;
  147.     background-color:rgb(255,69,0,0.3);
  148.     border-radius: 0.05rem;
  149.     margin-left: 0.04rem;
  150.     margin-right: 0.1rem;
  151. }
  152. main .goods-nav .context .huasuanhaowu span{
  153.     margin: 0.1rem;
  154.     padding: auto;
  155.     font-weight: bolder;
  156.     /* color: darkpink; */
  157. }
  158. main  .bottom {
  159.     margin: auto;
  160.     position: relative;
  161.     top:7.03rem;
  162.     background-color: #fff;
  163.     width: 100%;
  164.     height: 0.42rem;
  165.     border-radius: 0 0 0.1rem 0.1rem;
  166. }
  167. main  .bottom .context{
  168.     display: flex;
  169.     place-content: start;
  170.     place-items: center;
  171. }

效果：

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