search

博客列表 >移动端布局思路与视口之间关系并实例演示基本架构

移动端布局思路与视口之间关系并实例演示基本架构

天宁
天宁原创
2022年04月02日 19:20:08329浏览

移动端布局思路与视口之间关系并实例演示基本架构

移动端布局思路

  • 视图统一
    • 设置布局视图和视觉视图统width=device-width
    • 理想视图与视觉视图统一inintial-scale=1.0
  • 把之前使用的px转换成rem
    • 为方便计算,将 1rem 设置为 100px,一般以屏幕宽度(375px)为基准,为方便计算,将 1rem 设置为 100px,100px=100vw/1vw=100vw/(375/100)=100vw/3.75
  • 把根元素中的字体大小改成浏览器默认的 16px
    • 因为已经改成 1rem=100px,所有这里的 16px 为 0.16rem
      1. body {
      2. font-size: 0.16rem;
      3. }
  • 限制一下手机上最大最小字号
    • 通过媒体查询的方式设置,这里不能使用rem,不然不同手机宽度可能就超出或很小
      1. /* 最小的字号,宽度小于等于320px采用的样式 */
      2. @media screen and (max-width: 320px) {
      3. :root {
      4.     font-size: 85px;
      5. }
      6. }
      7. /* 最大的字号,宽度大于等于640px采用的样式 */
      8. @media screen and (min-width: 640px) {
      9. :root {
      10.     font-size: 170px;
      11. }
      12. }

三种视口之间的关系

  • 布局视口Layout viewport
    • 设备无关, 通常默认980px,显示完整网页
  • 视觉视口visual viewport
    • 设备相关,用户手机屏幕可见部分,通过缩放查看全部
  • 理想视口idea viewport
    • 不必缩放就可查看全部,针对移动端进行布局

手机页面的基本整体架构

  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>手机页面布局整体架构</title>
  8.         <link rel="stylesheet" href="css/reset.css" />
  9.         <style>
  10.             /* 顶部 */
  11.             header {
  12.                 position: relative;
  13.             }
  14.             /* logo和搜索框布局 */
  15.             header .top {
  16.                 position: fixed;
  17.                 display: flex;
  18.                 width: 100vw;
  19.                 justify-content: space-between;
  20.                 padding: 0.05rem 0.15rem;
  21.                 background-color: rgb(228, 114, 8);
  22.             }
  23.             /* 设置一下搜索框宽度 */
  24.             header .top .search input {
  25.                 width: 70vw;
  26.             }
  27.             /* 把轮播图的位置设置出来 */
  28.             header .carousel {
  29.                 position: absolute;
  30.                 top: 0.29rem;
  31.                 height: 1.17rem;
  32.             }
  33.             /* 轮播图设置宽度 */
  34.             header .carousel img {
  35.                 width: 100vw;
  36.             }
  37.             /* 导航组 */
  38.             header .nav {
  39.                 position: absolute;
  40.                 top: calc(0.29rem + 1.17rem);
  41.                 height: 1.5rem;
  42.                 display: grid;
  43.                 width: 100vw;
  44.                 grid-template-columns: repeat(4, 1fr);
  45.                 grid-template-rows: repeat(2, 1fr);
  46.                 place-items: center;
  47.             }
  48.             /* 主体部分 */
  49.             main {
  50.                 position: relative;
  51.                 top: calc(0.29rem + 1.17rem + 1.5rem);
  52.                 padding: 0.1rem;
  53.             }
  54.             /* 主体部分字体颜色等 */
  55.             main div {
  56.                 color: red;
  57.                 font-size: 0.3rem;
  58.                 font-weight: bolder;
  59.                 text-align: center;
  60.             }
  61.             /* 底部菜单栏做个固定定位 */
  62.             footer {
  63.                 position: fixed;
  64.                 top: calc(100vh - 0.46rem);
  65.                 background-color: #fff;
  66.             }
  67.             /* 底部布局 */
  68.             footer .menu {
  69.                 display: flex;
  70.                 width: 100vw;
  71.                 height: 0.46rem;
  72.                 justify-content: space-around;
  73.                 align-items: center;
  74.             }
  75.         </style>
  76.     </head>
  77.     <body>
  78.         <!-- 页眉 -->
  79.         <header>
  80.             <div class="top">
  81.                 <!-- 顶部logo和搜索框等 -->
  82.                 <div class="logo">图标</div>
  83.                 <div class="search">
  84.                     <input type="search" placeholder="我是搜索框" />
  85.                 </div>
  86.             </div>
  87.             <div class="carousel">
  88.                 <!-- 轮播图 -->
  89.                 <img src="image/1.jpg" alt="" />
  90.             </div>
  91.             <ul class="nav">
  92.                 <li>分类1</li>
  93.                 <li>分类2</li>
  94.                 <li>分类3</li>
  95.                 <li>分类4</li>
  96.                 <li>分类5</li>
  97.                 <li>分类6</li>
  98.                 <li>分类7</li>
  99.                 <li>分类8</li>
  100.             </ul>
  101.         </header>
  102.         <!-- 主体 -->
  103.         <main>
  104.             <!-- 主体内容,根据不同需要进行具体操作 -->
  105.             <div>
  106.                 <p>我是主体1</p>
  107.                 <p>我是主体2</p>
  108.                 <p>我是主体3</p>
  109.                 <p>我是主体4</p>
  110.                 <p>我是主体5</p>
  111.                 <p>我是主体6</p>
  112.                 <p>我是主体</p>
  113.                 <p>我是主体</p>
  114.                 <p>我是主体</p>
  115.                 <p>我是主体</p>
  116.                 <p>我是主体</p>
  117.                 <p>我是主体</p>
  118.                 <p>我是主体</p>
  119.                 <p>我是主体</p>
  120.                 <p>我是主体</p>
  121.                 <p>我是主体999</p>
  122.             </div>
  123.         </main>
  124.         <!-- 页脚 -->
  125.         <footer>
  126.             <!-- 底部菜单栏,一般是首页,我的等按钮 -->
  127.             <ul class="menu">
  128.                 <li>菜单1</li>
  129.                 <li>菜单2</li>
  130.                 <li>菜单3</li>
  131.                 <li>菜单4</li>
  132.             </ul>
  133.         </footer>
  134.     </body>
  135. </html>
上一条：淘宝移动端首页商品列表实例下一条：实例演示函数参数与返回值、演示模板字面量与模板函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多