search

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

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

Blackeye
Blackeye原创
2022年03月31日 13:30:38555浏览

总结出移动端布局的基本思路与三种视口之间的关系?

  1.  移动端布局需要根据设计师的方案计算出合理的font-size，
  2. 利用rem进行理想视口（支持移动端额视口开发）。
  3. 在html中设置meta属性令width=device-width来保证布局视口和视觉视口的宽度统一，利用initial-scale=1.0保证初始化缩放比例一致

hwshow

  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.     <title>taobao</title>
  8.     <link rel="stylesheet" href="static/css/reset.css" />
  9.     <link rel="stylesheet" href="static/css/header.css" />
  10.     <link rel="stylesheet" href="static/css/footer.css" />
  11.     <link rel="stylesheet" href="static/css/main.css">
  12.     <link rel="stylesheet" href="static/font_icon/iconfont.css" />
  13.   </head>
  14.   <body>
  15.     <!-- 头部 -->
  16.     <header>
  17.       <div class="top">
  18.         <div class="iconfont icon-shejiaotubiao-08 logo"></div>
  19.         <div class="search">
  20.           <a href="#" class="iconfont icon-fangdajing text">寻找宝贝店铺</a>
  21.         </div>
  22.       </div>
  23.       <div class="slider">
  24.         <img src="static/images/banner/banner4.jpg" alt="" />
  25.       </div>
  26.       <div class="nav">
  27.         <div class="navlist">
  28.           <a href="#">
  29.             <img src="static/images/nav/nav1.png" alt="" />
  30.             <span>天猫新品</span>
  31.           </a>
  32.         </div>
  33.         <div class="navlist">
  34.           <a href="#">
  35.             <img src="static/images/nav/nav2.png" alt="" /><span
  36.               >今日爆款</span
  37.             ></a
  38.           >
  39.         </div>
  40.         <div class="navlist">
  41.           <a href="#"
  42.             ><img src="static/images/nav/nav3.png" alt="" /><span
  43.               >天猫国际</span
  44.             ></a
  45.           >
  46.         </div>
  47.         <div class="navlist">
  48.           <a href="#"
  49.             ><img src="static/images/nav/nav4.png" alt="" /><span
  50.               >天猫超市</span
  51.             ></a
  52.           >
  53.         </div>
  54.         <div class="navlist">
  55.           <a href="#"
  56.             ><img src="static/images/nav/nav5.png" alt="" /><span
  57.               >充值中心</span
  58.             ></a
  59.           >
  60.         </div>
  61.         <div class="navlist">
  62.           <a href="#"
  63.             ><img src="static/images/nav/nav6.png" alt="" /><span
  64.               >机票酒店</span
  65.             ></a
  66.           >
  67.         </div>
  68.         <div class="navlist">
  69.           <a href="#"
  70.             ><img src="static/images/nav/nav7.png" alt="" /><span
  71.               >金币庄园</span
  72.             ></a
  73.           >
  74.         </div>
  75.         <div class="navlist">
  76.           <a href="#"
  77.             ><img src="static/images/nav/nav8.png" alt="" /><span
  78.               >阿里拍卖</span
  79.             ></a
  80.           >
  81.         </div>
  82.         <div class="navlist">
  83.           <a href="#"
  84.             ><img src="static/images/nav/nav1.png" alt="" /><span
  85.               >淘宝吃货</span
  86.             ></a
  87.           >
  88.         </div>
  89.         <div class="navlist">
  90.           <a href="#"
  91.             ><img src="static/images/nav/nav2.png" alt="" /><span
  92.               >分类</span
  93.             ></a
  94.           >
  95.         </div>
  96.         <div class="roll"></div>
  97.       </div>
  98.     </header>
  100.     <!-- 主体 -->
  101.     <main>
  102.         <div class="topMain">
  103.             <div class="topMain-left">
  105.             </div>
  106.             <div class="topMain-right">
  107.             </div>
  108.         </div>
  110.         <div class="displayMain">
  111.             <div class="advance">
  113.             </div>
  114.             <div class="displayWindow">
  116.             </div>
  117.         </div>
  118.     </main>
  120.     <!-- 底部 -->
  121.     <footer>
  122.         <div class="buttom">
  123.             <div class="buttomnav">
  124.                 <a href="#" class="iconfont icon-shejiaotubiao-44"></a>
  125.             </div>
  126.             <div class="buttomnav">
  127.               <a href="#" class="iconfont icon-gouwuche"></a>
  128.               <span>购物车</span>
  129.             </div>
  130.             <div class="buttomnav">
  131.               <a href="#" class="iconfont icon-wodetaobao"></a>
  132.               <span>我的淘宝</span>
  133.             </div>
  134.         </div>
  135.     </footer>
  136.   </body>
  137. </html>
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. a{
  8.     text-decoration: none;
  9.     color: black;
  10. }
  12. li{
  13.     list-style: none;
  14. }
  16. :root{
  17.     font-size: calc(100vw / 3.75);
  18. }
  21. body{
  22.     font-size: .12rem;
  24.     color: #333;
  25.     max-width: 7.5rem;
  26.     min-width: 3.2rem;
  27.     margin: auto;
  28.     background-color: #f4f4f4;
  29. }
  32. @media screen and (max-width: 320px) {
  33.     :root {
  34.        font-size: 85px;
  35.    }
  36. }
  38. @media screen and (min-width: 640px) {
  39.     :root {
  40.        font-size: 170px;
  41.    }
  42. }
  1. header{
  2.     position: relative;
  3. }
  4. header .top{
  5.     position: fixed;
  6.     width: 100vw;
  7.     top: 0;
  8.     right: 0;
  9.     left: 0;
  10.     background-color: rgb(255, 133, 42);
  11.     z-index: 99;
  12.     display: grid;
  13.     grid-template-columns: .37rem 1fr;
  14. }
  16. header .top .logo{
  17.     font-size: 0.3rem;
  18.     color: white;
  19.     padding-left: .05rem;
  20.     place-self: end;
  21. }
  23. header .top .search{
  24.     display: grid;
  25.     grid-template-columns: .05rem 1fr .05rem;
  26.     grid-template-rows: .05rem 1fr .05rem;
  27. }
  29. header .top .search a{
  30.     background-color: rgb(255, 78, 34);
  31.     border-radius: .05rem;
  32.     color: rgb(240, 224, 220);
  33.     font-size: 0.13rem;
  35.     grid-area: 2 / 2 / span 1 / span 1;
  36.     text-align: center;
  37. }
  39. header .slider{
  40.     height: 1.2rem;
  41.     position: absolute;
  42.     top: .30rem;
  43. }
  45. header .slider img,
  46. header .nav img{
  47.     width: 100%;
  48.     height: 100%;
  49. }
  51. header .nav{
  52.     position: absolute;
  53.     top:1.5rem;
  54.     width: 100vw;
  55.     height: 1.76rem;
  56.     padding-top: .1rem;
  57.     display: grid;
  58.     grid-template-columns: repeat(5,.61rem);
  59.     grid-template-rows: 1fr 1fr .2rem;
  60.     background-color: white;
  61.     place-content: space-around;
  62. }
  64. header .nav img{
  65.     width: .61rem;
  66.     height: .48rem;
  67. }
  69. header .nav .roll{
  70.     grid-area: 3 / 1 / span 1 / span 5;
  71.     place-self: center;
  72.     width: .5rem;
  73.     height: .03rem;
  74.     background-color: rgb(212,216,222);
  75.     border-radius: 4px;
  76. }
  77. header .nav .navlist{
  78.     text-align: center;
  79. }
  1. footer {
  2.     position: fixed;
  3.     width: 100vw;
  4.     height: .46rem;
  5.     bottom: 0;
  6.     right: 0;
  7.     left: 0;
  8.     background-color: rgb(255, 255, 255);
  9. }
  11. footer .buttom{
  12.     display: grid;
  13.     grid-template-columns: repeat(3,1fr);
  14.     grid-template-rows: 0.05rem 0.36rem 0.05rem;
  15.     place-items: space-around;
  16. }
  19. /* 36*36 20*20 */
  20. footer .buttom .buttomnav{
  21.     grid-row: 2 / 3;
  22.     height: .36rem;
  23.     text-align: center;
  24. }
  26. footer .buttom .buttomnav a~span{
  27.     display:block;
  28.     font-size: 0.12rem;
  29. }
  31. footer .buttom .buttomnav:first-of-type a{
  32.     font-size: 0.33rem;
  33.     color: coral;
  34. }
  36. footer .buttom .buttomnav:nth-of-type(n+2) a{
  37.     font-size: 0.2rem;
  38. }
  1. main .topMain{
  2.     position: absolute;
  3.     top: 3.36rem;
  4.     width: 100vw;
  5.     height: 4.03rem;
  6.     background-color: #fff;
  7.     border-radius: 0.06rem;
  8. }
  10. main .topMain{
  11.     display: grid;
  12.     margin-right: 2rem;
  13. }
上一条：补充js函数类型和数据类型知识下一条：移动端布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多