Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 移动端布局
Blogger Information
Blog 15
fans 0
comment 0
visits 6248
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
移动端布局
啊℃。㏄
Original
461 people have browsed it

移动端布局

移动端布局的总结：

第一个：尽量不适用px（像素）或者就不适用
第二个：把浏览器默认值16px，调成100px，比较方便计算

三种视口关系

名称 描述
布局视图 默认值是980px，width
视觉视图 跟设备有关，如果设备的宽度是375px，那视觉视图就是375px
理想视图 不用缩放就可以看到全部内容

三者之间的关系

布局视图：980px width
视觉视图：375px device-width
修改布局视图：width = device-width 布局视图等于视觉视图
initial-scale=1.0，初始化时，布局视图/视觉视图=理想视图

仿淘宝的页面

html:

  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.     <link rel="stylesheet" href="css/reset.css">
  8.     <link rel="stylesheet" href="css/header.css">
  9.     <link rel="stylesheet" href="css/footer.css">
  10.     <link rel="stylesheet" href="css/main.css">
  11.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3287522_ivn926ftai.css">
  12.     <title>Document</title>
  13. </head>
  14. <body>
  15.     <!-- 页眉 -->
  16.     <header>
  17.         <!-- 顶部 -->
  18.         <div class="top">
  19.             <!-- logo -->
  20.             <div class="logo iconfont icon-shejiaotubiao-44"></div>
  21.             <!-- 搜索框 -->
  22.             <div class="search">
  23.                 <div class="keys">
  24.                     <span class="iconfont icon-fangdajing"></span>
  25.                     <span>寻找宝贝店铺</span>
  26.                 </div>
  27.             </div>
  28.         </div>
  29.         <!-- 轮播图 -->
  30.         <div class="slider">
  31.             <a href=""><img src="../0328课件/taobao1.jpg" alt=""></a>
  32.         </div>
  33.         <!-- 导航组 -->
  34.         <ul class="nav">
  35.             <li class="item">
  36.                 <a href=""><img src="nav/1.png" alt=""></a>
  37.                 <a href="">天猫新品</a>
  38.             </li>
  39.             <li class="item">
  40.                 <a href=""><img src="nav/2.png" alt=""></a>
  41.                 <a href="">今日爆款</a>
  42.             </li>
  43.             <li class="item">
  44.                 <a href=""><img src="nav/3.png" alt=""></a>
  45.                 <a href="">天猫国际</a>
  46.             </li>
  47.             <li class="item">
  48.                 <a href=""><img src="nav/4.png" alt=""></a>
  49.                 <a href="">天猫超市</a>
  50.             </li>
  51.             <li class="item">
  52.                 <a href=""><img src="nav/5.png" alt=""></a>
  53.                 <a href="">充值中心</a>
  54.             </li>
  55.             <li class="item">
  56.                 <a href=""><img src="nav/6.png" alt=""></a>
  57.                 <a href="">机票酒店</a>
  58.             </li>
  59.             <li class="item">
  60.                 <a href=""><img src="nav/7.png" alt=""></a>
  61.                 <a href="">金币庄园</a>
  62.             </li>
  63.             <li class="item">
  64.                 <a href=""><img src="nav/8.png" alt=""></a>
  65.                 <a href="">阿里拍卖</a>
  66.             </li>
  67.             <li class="item">
  68.                 <a href=""><img src="nav/9.png" alt=""></a>
  69.                 <a href="">淘宝吃货</a>
  70.             </li>
  71.             <li class="item">
  72.                 <a href=""><img src="nav/10.png" alt=""></a>
  73.                 <a href="">分类</a>
  74.             </li>
  75.         </ul>
  76.     </header>
  77.     <footer>
  78.         <div class="item active">
  79.             <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  80.         </div>
  81.         <div class="item">
  82.             <a href="" class="iconfont icon-gouwuche "></a>
  83.             <a href="">购物车</a>
  84.         </div>
  85.         <div class="item">
  86.             <a href="" class="iconfont icon-gerenzhongxin "></a>
  87.             <a href="">我的淘宝</a>
  88.         </div>
  89.     </footer>
  90. </body>
  91. </html>

css

reset.css

  1.    /* 初始化 */
  2. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  11. a {
  12.     text-decoration: none;
  14. }
  17. li {
  18.     list-style: none;
  19. }
  21. html {
  22.     font-size: calc(100vw / 3.75);  
  23. }
  24. body {
  25.     font-size: .12rem;
  26.     color: rgb(31, 30, 30);
  27.     /* 防止页眉或大或小 */
  28.     max-width: 750px;
  29.     min-width: 320px;
  30.     margin: auto;
  31.     background-color:#f4f4f4;
  32. }
  35. /* 限制手机最小字号 */
  36. @media screen and (max-width: 300px) {
  37.     html {
  38.         font-size: 85px;
  39.     }   
  40. }
  42. /* 限制手机最大字号 */
  43. @media screen and (min-width: 700px) {
  44.     html {
  45.         font-size: 170px;
  46.     }   
  47. }

header.css

  1. header {
  2.     position: relative;
  3. }
  4. header .top {
  5.     width: 100vw;
  6.     position: fixed;
  7.     top: 0;
  8.     left: 0;
  9.     right: 0;
  10.     background-color:coral;
  11.     display: grid;
  12.     grid-template-columns: 0.35rem 1fr;
  13.     padding:0.05rem;
  14.     /* 调整显示层级 z-index */
  15.     z-index: 99;
  16. }
  18. header .top .logo {
  19.    color: white;
  20.    font-size: 0.35rem;
  21. }
  24. header .top .search {
  25.     background-color:orangered;
  26.     color: #eee;
  27.     display: grid;
  28.     place-content: center;
  29.     border-radius: 0.5rem;
  30.     font-size: 0.15rem;
  31. }
  35. /* 轮播图，用图片代替 */
  36. header .slider {
  37.     height: 1.25rem;
  38.     position: absolute;
  39.     top: .47rem;
  40. }
  41. header .slider img , header .nav img {
  42.     width: 100%;
  43.     height: 100%;
  44. }
  47. /* 导航组 */
  49. header .nav {
  50.     background-color: #fff;
  51.     position: absolute;
  52.     top: calc(0.47rem + 1.2rem);
  53.     display: grid;
  54.     grid-template-columns: repeat(5,1fr);
  55.     font-size: .11rem;
  56.     padding: 0.2rem 0.1rem;
  57. }
  59. header .item {
  60.     display: grid;
  61.     place-items: center;
  62.     padding: 0.05rem;
  63. }

footer.css

  1. footer {
  2.     width: 100vw;
  3.     height: .46rem;
  4.     position: fixed;
  5.     bottom: 0;
  6.     left: 0;
  7.     right: 0;
  8.     background-color:#fff;
  9.     display: grid;
  10.     grid-template-columns: repeat(3,1fr);
  11.     place-items: center;
  13. }
  15. footer .item {
  16.     display: grid;
  17.     place-items: center;
  18. }
  20. footer .item .iconfont {
  21.     font-size: 0.2rem;
  22.     color: black;
  23. }
  26. footer .item.active .iconfont {
  27.     font-size: 0.36rem;
  28.     color: coral;
  29. }
  31. footer .item a,
  32. footer .item.iconfont{
  33.     color:rgb(117, 116, 115);
  34. }

效果：

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