search

博客列表 >移动端布局实操

移动端布局实操

newbie
newbie原创
2022年04月03日 16:12:50351浏览

布局思路

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. }
上一条：常用函数类型和数据类型下一条：PHP执行linux命令6个函数代码实例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多