简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 移动端布局的基本思路与三种视口之间的关系、实战手机页面的基本整体架构:页眉,页脚,主体等
Blogger Information
Blog 38
fans 0
comment 0
visits 18587
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
移动端布局的基本思路与三种视口之间的关系、实战手机页面的基本整体架构:页眉,页脚,主体等
Blackeye
Original
539 people have browsed it

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

  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. }
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！