Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 移动端布局实操
Blogger Information
Blog 19
fans 0
comment 0
visits 9873
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
移动端布局实操
newbie
Original
346 people have browsed it

布局思路

1.排除像素的影响
2.固定视窗 让其不能缩放与移动
3.用媒体查询的方法锁定最大和最小rem

三种视口的关系

1.布局视口就是无视视口大小 固定显示完整网页（类似将手机浏览器设置成电脑端视图 会在手机上显示整个网页的宽度） 一般宽度为980px
2.视窗视口就是在用户屏幕上可以显示部分界面 通过缩放和移动的方式可以查看整个网页 类似放大镜
3.理想视口就是通过移动端布局的方式将整个网页重新排版 让用户不必缩放和移动就可查看网页

淘宝移动端首页布局实战

效果图

代码

  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.     <link
  8.       rel="stylesheet"
  9.       href="//at.alicdn.com/t/font_3280490_nq1wlmgblpa.css"
  10.     />
  11.     <link rel="stylesheet" href="/0403/1/css/rest.css" />
  12.     <link rel="stylesheet" href="/0403/1/css/heard.css" />
  13.     <link rel="stylesheet" href="/0403/1/css/footer.css" />
  14.     <link rel="stylesheet" href="/0403/1/css/main.css" />
  15.     <title>Document</title>
  16.   </head>
  17.   <body>
  18.     <header>
  19.       <div class="top">
  20.         <div class="iconfont icon-tao"></div>
  21.         <a href="" class="iconfont icon-search">寻找宝贝店铺</a>
  22.       </div>
  23.     </header>
  24.     <main>
  25.       <div class="lunbo"><img src="/0403/1/images/top.jpg" /></div>
  26.       <div class="daohang">
  27.         <div class="itme1">
  28.           <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  29.         </div>
  30.         <div class="itme1">
  31.           <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  32.         </div>
  33.         <div class="itme1">
  34.           <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  35.         </div>
  36.         <div class="itme1">
  37.           <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  38.         </div>
  39.         <div class="itme1">
  40.           <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  41.         </div>
  42.         <div class="itme1">
  43.           <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  44.         </div>
  45.         <div class="itme1">
  46.           <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  47.         </div>
  48.         <div class="itme1">
  49.           <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  50.         </div>
  51.         <div class="itme1">
  52.           <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  53.         </div>
  54.         <div class="itme1">
  55.           <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  56.         </div>
  57.       </div>
  58.       <div class="huakuai"></div>
  59.     </main>
  60.     <footer>
  61.       <div class="taobaotubiao">
  62.         <a href="" class="iconfont icon-taobao taobao"></a>
  63.       </div>
  64.       <a href="" class="iconfont icon-gouwuche"
  65.         ><div class="gouwu">购物车</div></a
  66.       >
  68.       <a href="" class="iconfont icon-my"><div class="wode">我的淘宝</div></a>
  69.     </footer>
  70.   </body>
  71. </html>

CSS代码

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: #555;
  9. }
  10. li {
  11.   list-style: none;
  12. }
  13. :root {
  14.   font-size: calc(375px / 3.75);
  15. }
  16. body {
  17.   font-size: 0.16rem;
  18.   background-color: #f4f4f4;
  19. }
  20. @media screen and (max-width: 360px) {
  21.   :root {
  22.     font-size: 75px;
  23.   }
  24. }
  25. @media screen and (min-width: 600px) {
  26.   :root {
  27.     font-size: 150px;
  28.   }
  29. }
  30. main {
  31.   width: 100vw;
  32.   position: relative;
  33.   top: 0.37rem;
  34. }
  35. main .lunbo img {
  36.   width: 100%;
  37.   height: 100%;
  38. }
  39. main .daohang {
  40.   display: grid;
  41.   grid-template-columns: repeat(5, 1fr);
  42.   grid-template-rows: repeat(2, 1fr);
  43.   background-color: white;
  44. }
  45. main .daohang img {
  46.   width: 0.61rem;
  47.   height: 0.48rem;
  48. }
  49. main .daohang div {
  50.   display: grid;
  51.   grid-template-rows: 2, 1fr;
  52.   place-items: center;
  53. }
  54. main .daohang span {
  55.   font-size: 0.12rem;
  56.   line-height: 15px;
  57.   margin-top: 0.04rem;
  58. }
  59. .huakuai {
  60.   width: 100vw;
  61.   height: 0.2rem;
  62.   background-color: white;
  63. }
  64. header {
  65.   position: relative;
  66. }
  68. header .icon-tao {
  69.   color: white;
  70.   font-size: 0.3rem;
  71. }
  72. header .top {
  73.   background-color: hsl(26, 100%, 58%);
  74.   width: 100vw;
  75.   height: 0.37rem;
  76.   display: grid;
  77.   grid-template-columns: 0.37rem 1fr;
  78.   place-items: center;
  79.   z-index: 99;
  80.   position: fixed;
  81. }
  82. header .top a {
  83.   background-color: #ff4e22;
  84.   width: 3.24rem;
  85.   height: 0.25rem;
  86.   line-height: 0.25rem;
  87.   text-align: center;
  88.   font-size: 0.14rem;
  89.   color: white;
  90.   border-radius: 0.05rem;
  91.   margin-bottom: 0.01rem;
  92. }
  93. footer {
  94.   position: fixed;
  95.   bottom: 0;
  96.   left: 0;
  97.   right: 0;
  98.   width: 100vw;
  99.   height: 0.46rem;
  100.   background-color: white;
  101.   display: grid;
  102.   grid-template-columns: repeat(3, 1fr);
  103.   place-items: center;
  104. }
  105. footer a {
  106.   display: grid;
  107.   place-items: center;
  108. }
  109. footer .iconfont div {
  110.   font-size: 0.12rem;
  111. }
  112. footer .iconfont {
  113.   font-size: 0.26rem;
  114. }
  115. footer .taobaotubiao .taobao {
  116.   font-size: 0.36rem;
  117.   color: #ff6f01;
  118. }
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