简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >移动端布局基本常识和仿淘宝手机站

移动端布局基本常识和仿淘宝手机站

李玉峰
李玉峰原创
2022年03月31日 00:20:38382浏览

移动端布局基本常识

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <title>移动端布局基本常识</title>
  8.   </head>
  9.   <body>
  10.     <!-- DPR:设备像素比，设备显示和页面CSS之间的比值 -->
  11.     <!-- 布局视图：通常是980px width-->
  12.     <!-- 视觉视图：375px 手机宽度device-width-->
  13.     <!-- 第一步：修改布局试图，让布局试图=视觉视图：width = device-width -->
  14.     <!-- 第二步：初始化：initial-scale=1.0  理想视图 = 视觉视图，布局试图/视觉视图 = 1 : 1  -->
  15.     <!-- 主流解决方案：rem + vw -->
  16.     <!-- 手机端将px全部转换成rem,插件px to rem & rpx(cssrem) -->
  17.     <!-- 默认 1rem = 16px 为了计算方便，可以自己修改成:100px = 1rem -->
  18.     <div class="box">hello</div>
  19.     <style>
  20.       /* html = :root */
  21.       html {
  22.         /* 设置根字号 */
  23.         /* 以iphone11为例： */
  24.         /* 设计稿宽750px，DPR = 2 , iphone11手机视觉视图device-width为375px */
  25.         /* device-width = width / DPR = 750px / 2 = 375px */
  26.         /* 100vw = 375px =100%  */
  27.         /* 1vw = 375px / 100 = 3.75 */
  28.         /* 100px = 100vw /3.75 = 375px / 3.75 */
  29.         /* font-size: 100px; */
  30.         font-size: calc(100vw / 3.75);
  31.       }
  32.       body {
  33.         /* 在body将font-size还原成浏览器默认值16px */
  34.         font-size: 0.16rem;
  35.       }
  36.       .box {
  37.         width: 2rem;
  38.         height: 0.5rem;
  39.         border: 1px solid #000;
  40.         background-color: lightgreen;
  41.       }
  42.       /* 媒体查询：宽度最小300px时字体不再变小 */
  43.       @media screen and (max-width: 300px) {
  44.         :root {
  45.           font-size: 85px;
  46.         }
  47.       }
  48.       /* 媒体查询：宽度最大600px时字体不再变大 */
  49.       @media screen and (min-width: 600px) {
  50.         :root {
  51.           font-size: 170px;
  52.         }
  53.       }
  54.     </style>
  55.   </body>
  56. </html>

仿淘宝手机版

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <title>仿淘宝首页</title>
  8.     <link rel="stylesheet" href="font_icon/iconfont.css" />
  9.     <link rel="stylesheet" href="css/reset.css" />
  10.     <link rel="stylesheet" href="css/header.css" />
  11.     <link rel="stylesheet" href="css/footer.css" />
  12.     <link rel="stylesheet" href="css/main.css" />
  13.   </head>
  14.   <body style="height: 1500px">
  15.     <!-- 头部 -->
  16.     <header>
  17.       <!-- 顶部 -->
  18.       <div class="top">
  19.         <div class="logo iconfont icon-shejiaotubiao-08"></div>
  20.         <div class="search">
  21.           <div class="keys">
  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/nav1.png" /></a>
  35.           <a href="">天猫新品</a>
  36.         </li>
  37.         <li class="item">
  38.           <a href=""><img src="images/nav/nav2.png" /></a>
  39.           <a href="">天猫新品</a>
  40.         </li>
  41.         <li class="item">
  42.           <a href=""><img src="images/nav/nav3.png" /></a>
  43.           <a href="">天猫新品</a>
  44.         </li>
  45.         <li class="item">
  46.           <a href=""><img src="images/nav/nav4.png" /></a>
  47.           <a href="">天猫新品</a>
  48.         </li>
  49.         <li class="item">
  50.           <a href=""><img src="images/nav/nav5.png" /></a>
  51.           <a href="">天猫新品</a>
  52.         </li>
  53.         <li class="item">
  54.           <a href=""><img src="images/nav/nav6.png" /></a>
  55.           <a href="">天猫新品</a>
  56.         </li>
  57.         <li class="item">
  58.           <a href=""><img src="images/nav/nav7.png" /></a>
  59.           <a href="">天猫新品</a>
  60.         </li>
  61.         <li class="item">
  62.           <a href=""><img src="images/nav/nav2.png" /></a>
  63.           <a href="">天猫新品</a>
  64.         </li>
  65.         <li class="item">
  66.           <a href=""><img src="images/nav/nav3.png" /></a>
  67.           <a href="">天猫新品</a>
  68.         </li>
  69.         <li class="item">
  70.           <a href=""><img src="images/nav/nav4.png" /></a>
  71.           <a href="">天猫新品</a>
  72.         </li>
  73.       </ul>
  74.     </header>
  75.     <!-- 主体 -->
  76.     <main>
  77.       <div class="list">
  78.         <div class="title">
  79.           <img src="https://img.alicdn.com/tfs/TB1V2eQrKSSBuNjy0FlXXbBpVXa-966-114.png" />
  80.         </div>
  81.         <ul class="unit">
  82.           <li class="item">
  83.             <div class="img">
  84.               <img
  85.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  86.                 alt=""
  87.               />
  88.             </div>
  89.             <div class="detail">
  90.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  91.               <div class="price">
  92.                 <span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span>
  93.               </div>
  94.             </div>
  95.           </li>
  96.           <li class="item">
  97.             <div class="img">
  98.               <img
  99.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  100.                 alt=""
  101.               />
  102.             </div>
  103.             <div class="detail">
  104.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  105.               <div class="price">
  106.                 <span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span>
  107.               </div>
  108.             </div>
  109.           </li>
  110.           <li class="item">
  111.             <div class="img">
  112.               <img
  113.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  114.                 alt=""
  115.               />
  116.             </div>
  117.             <div class="detail">
  118.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  119.               <div class="price">
  120.                 <span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span>
  121.               </div>
  122.             </div>
  123.           </li>
  124.           <li class="item">
  125.             <div class="img">
  126.               <img
  127.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  128.                 alt=""
  129.               />
  130.             </div>
  131.             <div class="detail">
  132.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  133.               <div class="price">
  134.                 <span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span>
  135.               </div>
  136.             </div>
  137.           </li>
  138.           <li class="item">
  139.             <div class="img">
  140.               <img
  141.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  142.                 alt=""
  143.               />
  144.             </div>
  145.             <div class="detail">
  146.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  147.               <div class="price">
  148.                 <span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span>
  149.               </div>
  150.             </div>
  151.           </li>
  152.           <li class="item">
  153.             <div class="img">
  154.               <img
  155.                 src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp"
  156.                 alt=""
  157.               />
  158.             </div>
  159.             <div class="detail">
  160.               <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div>
  161.               <div class="price">
  162.                 <span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span>
  163.               </div>
  164.             </div>
  165.           </li>
  166.         </ul>
  167.       </div>
  168.     </main>
  169.     <!-- 底部 -->
  170.     <footer>
  171.       <div class="item active">
  172.         <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  173.       </div>
  174.       <div class="item">
  175.         <a href="" class="iconfont icon-gouwuche"></a>
  176.         <a href="">购物车</a>
  177.       </div>
  178.       <div class="item">
  179.         <a href="" class="iconfont icon-wodetaobao"></a>
  180.         <a href="">我的淘宝</a>
  181.       </div>
  182.     </footer>
  183.   </body>
  184. </html>

CSS初始化

  1. /* 样式重置 */
  3. * {
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7. }
  9. /* 链接 */
  11. a {
  12.   text-decoration: none;
  13.   color: #555;
  14. }
  16. /* 列表 */
  18. li {
  19.   list-style: none;
  20. }
  22. :root {
  23.   font-size: calc(100vw / 3.75);
  24. }
  26. body {
  27.   font-size: 0.12rem;
  28.   color: #333;
  29.   max-width: 750px;
  30.   min-width: 320px;
  31.   margin: auto;
  32.   background-color: #f4f4f4;
  33. }
  35. @media screen and (max-width: 320px) {
  36.   :root {
  37.     font-size: 85px;
  38.   }
  39. }
  41. @media screen and (min-width: 640px) {
  42.   :root {
  43.     font-size: 170px;
  44.   }
  45. }

头部CSS

  1. header {
  2.   position: relative;
  3. }
  4. header .top {
  5.   width: 100vw;
  6.   /* height: 50px; */
  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.1rem;
  15.   /* 调整层级 */
  16.   z-index: 99;
  17. }
  18. header .top .logo {
  19.   color: #fff;
  20.   font-size: 0.25rem;
  21. }
  22. header .top .search {
  23.   background-color: orangered;
  24.   color: #eee;
  25.   display: grid;
  26.   place-content: center;
  27.   border-radius: 0.06rem;
  28.   font-size: large;
  29. }
  30. /* baner图 */
  31. header .slider {
  32.   height: 1.25rem;
  33.   /* 绝对定位 */
  34.   position: absolute;
  35.   top: 0.35rem;
  36. }
  37. header .slider img,
  38. header .nav img {
  39.   width: 100%;
  40.   height: 100%;
  41. }
  42. /* 导航组 */
  43. header .nav {
  44.   background-color: #fff;
  45.   /* 绝对定位 */
  46.   position: absolute;
  47.   top: calc(0.35rem + 1.25rem);
  48.   display: grid;
  49.   grid-template-columns: repeat(5, 1fr);
  50.   font-size: 0.11rem;
  51.   padding: 0.2rem 0.1rem;
  52. }
  53. header .nav .item {
  54.   display: grid;
  55.   place-items: center;
  56.   padding: 0 0.03rem;
  57. }
  58. header .nav .item a {
  59.   padding: 0 0.03rem;
  60. }

底部CSS

  1. footer {
  2.   width: 100vw;
  3.   height: 0.46rem;
  4.   background-color: white;
  5.   position: fixed;
  6.   left: 0;
  7.   right: 0;
  8.   bottom: 0;
  9.   display: grid;
  10.   grid-template-columns: repeat(3, 1fr);
  11.   place-items: center;
  12. }
  13. footer .item {
  14.   display: grid;
  15.   place-items: center;
  16. }
  17. footer .item .iconfont {
  18.   font-size: 0.2rem;
  19. }
  20. footer .item.active .iconfont {
  21.   font-size: 0.36rem;
  22.   color: coral;
  23. }

商品列表CSS

  1. main {
  2.   position: relative;
  3.   top: calc(0.37rem + 1.25rem + 1.5rem);
  4.   padding: 0.08rem;
  5. }
  6. main .list {
  7.   display: grid;
  8.   place-content: center;
  9. }
  10. main .list .title {
  11.   display: grid;
  12.   place-content: center;
  13.   place-items: center;
  14.   margin-top: 0.2rem;
  15. }
  16. main .list .title img {
  17.   width: 85%;
  18.   height: 85%;
  19. }
  21. /* 产品列表 */
  22. main .list .unit {
  23.   display: grid;
  24.   grid-template-columns: repeat(2, 1fr);
  25.   gap: 0.2rem;
  26.   font-size: 0.11rem;
  27.   padding: 0.2rem 0rem;
  28. }
  29. main .list .unit img {
  30.   width: 100%;
  31.   height: 100%;
  32. }
  33. main .list .unit .item {
  34.   display: grid;
  35.   place-items: center;
  36.   background-color: #fff;
  37.   border-radius: 0.06rem;
  38. }
  39. main .list .unit .item .detail {
  40.   display: grid;
  41.   grid-template-rows: 0.4rem 0.2rem;
  42.   gap: 0.1rem;
  43.   margin-bottom: 0.1rem;
  44. }
  45. main .list .unit .item .detail .desc {
  46.   font-size: small;
  47.   margin: 0.1rem;
  48. }
  49. main .list .unit .item .detail .price {
  50.   font-size: smaller;
  51. }
  52. main .list .unit .item .detail .price .iconfont {
  53.   color: red;
  54. }
  55. main .list .unit .item .detail .price .num {
  56.   margin-left: 0.08rem;
  57. }
上一条：淘宝移动端首页的商品列表代码实现下一条：常用函数类型,常用数据类型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议