search

博客列表 >rem+vw 布局手机端与 grid 布局详解

rem+vw 布局手机端与 grid 布局详解

小柯
小柯原创
2022年01月01日 22:16:28590浏览

一. rem+vw 布局手机端

实例演示：

  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.     <title>手机端布局常用技巧</title>
  8.   </head>
  9.   <body>
  10.     <div class="box">手机页面响应式布局</div></div>
  11.   </body>
  12.    <!-- 一般会给设计稿，750的分辨率，DPR = 2
  13.    device-width = 750px / DPR  = 750 / 2 = 375px
  14.    则我们以后就直接以 375px 为宽度进行布局  -->
  15.    <!-- 除了屏幕适配需要固定，布局参数不要用到px -->
  17. </html>
  18. <style>
  19.     *{
  20.         padding: 0;
  21.         margin: 0;
  22.         box-sizing: border-box;
  23.     }
  24.     /* 样式重置三步 */
  25.     html{
  26.         font-size: calc(100vw / 3.75);
  27.         /* 因为 font-size是一个可以被继承的属性 */
  28.         /* 这边参考宽度是375px，即100vw = 375px ，所以100px = 100vw / 3.75 */
  29.         /* 此处可得1rem = 100px */
  30.     }
  31.     body{
  32.         font-size: 0.16rem;
  33.         /* 把字号还原成浏览器默认的字号, 16px */
  34.         /* 此处可得1em = 16px */
  35.     }
  36.     /* 设置最小宽度根字号大小 */
  37.     @media screen and (max-width: 320px) {
  38.         html {
  39.             font-size: 85px;
  40.           /* 最小的屏幕宽度时需要固定参数，不可用rem，否则就太小看不见了 */
  41.           /* 至于为什么是320px，字号是85px，此处为项目经验设置值，跟着走就对了 */
  42.         }
  43.     }
  44.     /* 设置最大宽度根字号大小 */
  45.     @media screen and (min-width: 640px) {
  46.         html {
  47.             font-size: 170px;
  48.           /* 最大的屏幕宽度时需要固定参数，目前还没超过640的手机端布局，除非ipad类型 */
  49.           /* 至于为什么是640px，字号是170px，此处可为最小宽度的比例*2即可得 */
  50.         }
  51.     }
  52.     /* 接下来实例样式设置查看 */
  53.     .box{
  54.         width: 3rem;
  55.         height: 1rem;
  56.         background-color: red;
  57.     }
  58. </style>

效果图示例演示：

二. grid 布局中的常用属性

2.1 grid 布局显式网格单个与区域网格选定

代码实例：

  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.     <title>grid容器属性与项目属性</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item"></div>
  12.     </div>
  13.   </body>
  14. </html>
  15. <style>
  16.   * {
  17.     padding: 0;
  18.     margin: 0;
  19.     box-sizing: border-box;
  20.   }
  21.   .container {
  22.     width: 30em;
  23.     height: 30em;
  24.     background-color: darkblue;
  25.     /* 使用grid布局容器 */
  26.     display: grid;
  27.     /* 显示在外面的网格：显式网格,建立一个3行3列的网格的3种写法 */
  28.     /* 第一种写法 */
  29.     grid-template-columns: 10em 10em 10em;
  30.     grid-template-rows: 10em 10em 10em;
  31.     /* 第二种写法 */
  32.     grid-template-columns: repeat(3, 10em);
  33.     grid-template-rows: repeat(3, 10em);
  34.     /* 第三种写法 ，这个用的比较多，响应式布局*/
  35.     grid-template-columns: repeat(3, 1fr);
  36.     grid-template-rows: repeat(3, 1fr);
  37.   }
  38.   /* 项目默认从左到右, 从上到下,按书写顺序进行排列 */
  39.   .container > .item {
  40.     background-color: #fff;
  41.     /* grid项目单个默认起始和结束参数，grid-row: 起始行 / 结束行 */
  42.     grid-row: 1 / 2;
  43.     grid-column: 1 / 2;
  44.     /* 如果我们要移到中间去，那么改变行号和列号即可 */
  45.     grid-row: 2 / 3;
  46.     grid-column: 2 / 3;
  47.     /* 也可以使用跨越的方式进行移动，使用最多的方式 */
  48.     grid-row: 2 / span 1;
  49.     grid-column: 2 / span 1;
  51.     /* grid项目网格区域，如中间一行三格如何布局*/
  52.     grid-row: 2 / 3;
  53.     grid-column: 1 / 4;
  54.     /* 也可以使用跨越的方式进行移动，使用最多的方式 */
  55.     grid-row: 2 / span 1;
  56.     grid-column: 1 / span 3;
  57.     /* 还可以使用简化代码,grid-area: 行开始/列开始/行结束/列结束; */
  58.     grid-area: 2 / 1 / 3 / 4;
  59.     /* 或者使用区域的跨越方式 */
  60.     grid-area: 2 / 1 / span 1 / span 3;
  61.   }
  62. </style>

效果图 1(单个项目默认样式)

效果图 2（项目在容器中移动到中间居中）

效果图 3（网格区域移动到中间一行）

2.2 grid 容器整体对齐方式以及项目在单元格内的对齐方式

代码实例：

  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.     <title>grid容器属性与项目属性</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <!-- 显示网格，直接生成在网格内的9个单元格 -->
  12.       <div class="item">1</div>
  13.       <div class="item">2</div>
  14.       <div class="item">3</div>
  15.       <div class="item">4</div>
  16.       <div class="item">5</div>
  17.       <div class="item">6</div>
  18.       <div class="item">7</div>
  19.       <div class="item">8</div>
  20.       <div class="item">9</div>
  21.       <!-- 再增加二个隐式网格,显示在容器自动生成的单元格中 -->
  22.       <div class="item">10</div>
  23.       <div class="item">11</div>
  24.     </div>
  25.   </body>
  26. </html>
  27. <style>
  28.   * {
  29.     padding: 0;
  30.     margin: 0;
  31.     box-sizing: border-box;
  32.   }
  33.   .container {
  34.     width: 40em;
  35.     height: 45em;
  36.     background-color: darkblue;
  37.     display: grid;
  38.     grid-template-columns: repeat(3, 10em);
  39.     grid-template-rows: repeat(3, 10em);
  40.     /* gap: 行间距  列间距 */
  41.     gap: 10px 10px;
  42.     /* 隐式网格: 容纳超出显式网格的项目即第10和11个项目显示在容器自动生成的单元格中 */
  43.     /* 当前的排列规则/方向, 行优先, 先在一行排列,排列不上再换行显示，可以改为列优先 */
  44.     /* 列优先可使用：grid-auto-flow: column;效果可看后面图例示意 */
  45.     /* 默认行优先，那么我们只需要限定行高即可，设定为10em */
  46.     grid-auto-rows: 10em;
  48.     /* 对齐的第一个前提：要有剩余空间进行分配 */
  49.     /* 对齐第二个前提：参照物；grid项目对齐有二个参照物: 容器, 单元格 */
  50.     /* 1. 所有项目在"容器"中的对齐方式  */
  51.     /* place-content: 垂直方向 水平方向; 参数：start,center,end;默认值：place-content: start start;*/
  52.     /* 所有项目的垂直水平都居中使用center,两个参数都一样可以只写一个 */
  53.     place-content: center center;
  55.     /* 剩余空间在所在项目之间进行分配，项目中最常用的是两端对齐  */
  56.     place-content: space-between space-between;
  58.     /* 2. 所有项目在所在的"单元格"中的对齐方式,项目需要限定大小,有剩余空间 */
  59.     /* place-items: 垂直方向 水平方向; 参数：start,center,end;默认值：place-items: start start;*/
  60.     /* 垂直不动，水平居中示例 */
  61.     place-items: start center;
  62.     /* 垂直水平都居中示例 */
  63.     place-items: center center;
  65.     /* 所有项目在容器和单元格中全部水平垂直居中 */
  66.     place-content: center;
  67.     place-items: center;
  68.   }
  69.   .container > .item {
  70.     background-color: lightgreen;
  71.     /* 限定一个项目大小，使得有剩余空间进行布局 */
  72.     width: 6em;
  73.     height: 6em;
  74.   }
  75.   /* 单个项目在单元格中位置的调整，可以使用伪类来进行选择,然后使用place-self属性 */
  76.   .container > .item:nth-of-type(3) {
  77.     background-color: #fff;
  78.     place-self: end end;
  79.   }
  80. </style>

效果图 1（九个网格默认样式）

效果图 2（所有项目在容器中的垂直水平都居中）

效果图 3（所有项目在容器中两端对齐）

效果图 4（所有项目在所在的”单元格”中垂直不动，水平居中）

效果图 5（所有项目在所在的”单元格”中垂直，水平都居中）

效果图 6（grid-auto-flow: column;列优先示例）

效果图 7（隐式网格2个的排列）

效果图 8（隐式网格行高限定10em）

效果图 9（单个项目在单元格向下调整图）

三. 圣杯布局(grid 版)赏析

代码实例：

  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.     <title>圣杯布局(grid版)</title>
  8.   </head>
  9.   <body>
  10.     <header>页眉</header>
  11.     <aside>左侧</aside>
  12.     <main>主体</main>
  13.     <aside>右侧</aside>
  14.     <footer>页脚</footer>
  16.     <style>
  17.       * {
  18.         padding: 0;
  19.         margin: 0;
  20.         box-sizing: border-box;
  21.       }
  22.       body * {
  23.         background-color: lightgreen;
  24.       }
  26.       body {
  27.         /* grid布局  */
  28.         display: grid;
  30.         /* 3行3列，中间最小固定，然后自适应放大 */
  31.         grid-template-columns: 200px minmax(400px, 1fr) 200px;
  32.         grid-template-rows: 3em minmax(calc(100vh - 6em - 0.6em), 1fr) 3em;
  34.         gap: 0.3em;
  36.         place-content: center;
  37.       }
  39.       header,
  40.       footer {
  41.         grid-column: span 3;
  42.       }
  43.     </style>
  44.   </body>
  45. </html>

圣杯布局效果图：

上一条：实例演示流程的分支循环和函数参数的返回值,并对对象字面量和模板字面量进行了演示,分析了模板字面量和模板函数的参数功能下一条：移动端页面布局技巧、Grid布局基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多