search

博客列表 >移动端布局学习小结与实践

移动端布局学习小结与实践

千里马遇伯乐
千里马遇伯乐原创
2022年03月29日 21:50:57420浏览

移动端布局知识点

序号 名称 描述
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 视觉视图 = 理想视图

HTML

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

css部分

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

上一条：淘宝移动端首页的商品列表下一条：移动布局原理、实战手机页面的基本整体架构页眉,页脚,主体。
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多