search

博客列表 >rem+vw Grid布局的原理与 rem 的设置技巧

rem+vw Grid布局的原理与 rem 的设置技巧

cool442
cool442原创
2022年01月15日 16:07:56532浏览

一、rem+vw 布局的原理与 rem 的设置技巧

1. 移动端布局基本知识点

  • 设备像素比 DPR：我的理解是现在移动设备像素高，如按实际像素显示页面就太小，设备就自动按一定像素比转换成人眼看较舒服的比例。
  • 布局视图：设备浏览器的可视宽度。我的理解是按屏幕硬件实际像素来布局。
  • 视觉视图：我的理解是按 DPR 转换后的像素布局。
  • 移动布局页头要有的语句

<meta name="viewport" content="width=device-width, initial-scale=1.0">

理解： name="viewport" 声明移动布局

理解： width=device-width

​ width 是布局视图宽度，即设备像素，比如某手机宽 980px

​ device-width 是视觉视图宽度，比如某手机宽 980px，实际显示的效果是 375px

​ width=device-width 就让布局视图宽度=宽度视觉视图

​ initial-scale=1.0 按 1：1 还原 width 布局视图，我的理解是按正常布局写程序，设备会自动转换。

  • 目前主流的移动布局：采用 rem + vw 单位，不能有 px

例：iphone11 375px
100vw = 100%的宽度 = 375px
则 1vw = 3.75px
一般浏览器 1rem = 16 px
为方便计算，一般设置 1rem = 100px
即设置 html 元素 font-size:100px

  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>rem+vw 布局的原理</title>
  8.   </head>
  9.   <body>
  10.     <div class="div1">PHP学习</div>
  11.     <div class="div2">PHP练习</div>
  12.     <style>
  13.       html {
  14.         /* 设置 1rem = 100px */
  15.         font-size: 100px;
  16.       }
  17.       body {
  18.         /* 还原字号为16px */
  19.         font-size: 0.16rem;
  20.       }
  21.       /* 上面两个设置后： */
  22.       /* 1rem = 100px */
  23.       /* 1em = 16px */
  24.       .div1 {
  25.         width: 2rem;
  26.         height: 0.35rem;
  27.         line-height: 0.35rem;
  28.         background-color: turquoise;
  29.       }
  30.       .div2 {
  31.         width: 10vw;
  32.         height: 5vh;
  33.         line-height: 5vh;
  34.         background-color: violet;
  35.       }
  36.     </style>
  37.   </body>
  38. </html>

二、grid 布局的属性

1. 复习 grid 容器知识点

  • 容器内的项目默认排列顺序为从左到右，从上到下。
  • 先设置容器即display: grid;
  • 设置容器网格：
    grid-template-columns 容器的列数及宽度
    grid-template-rows 容器的行数及宽度
  • 设置容器中项目的位置
    grid-column 起始、结束列数
    grid-row 起始、结束行数
    上面两个可合为1个属性
    grid-area 行开始/列开始/行结束/列结束
  • 实例：
  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>grid 布局的属性</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">项目</div>
  12.     </div>
  13.     <style>
  14.       * {
  15.         margin: 0;
  16.         padding: 0;
  17.         box-sizing: border-box;
  18.       }
  19.       .container {
  20.         height: 25em;
  21.         /* 设置grid容器 */
  22.         display: grid;
  23.         grid-template-columns: 6em 6em 6em;
  24.         grid-template-rows: 6em 6em 6em;
  26.         background-color: rgb(179, 231, 214);
  27.         border: 1px solid black;
  28.       }
  29.     </style>
  30.   </body>
  31. </html>

运行效果

  1.       .item {
  2.         /* 放在第1、2行间，2、3列间 */
  3.         grid-row: 1 /2;
  4.         grid-column: 2/3;
  5.         /* 上面2行可合并为1行样式，效果一样。如下： */
  6.         grid-area: 1/2/2/3;
  7.         background-color: coral;
  8.         border: 1px solid #000;
  9.       }

运行效果

属性另一种用法与上面运行效果相同：

  1.       /* 另一种用法 */
  2.       .container {
  3.         /* 重复分3个一样6em的网格 */
  4.         /* 效果同前 */
  5.         grid-template-columns: repeat(3, 6em);
  6.         grid-template-rows: repeat(3, 6em);
  7.       }
  8.       .item {
  9.         /* 上面2行可合并为1行样式，如下： */
  10.         grid-area: 1/2/2/3;
  11.       }

容器按比例分用法:

  1.       .container {
  2.         /* 容器按比例分用法：分3份，每份1块 */
  3.         grid-template-columns: repeat(3, 1fr);
  4.         grid-template-rows: repeat(3, 1fr);
  5.       }

运行效果

容器中项目跨网格：

  1.       /* 容器中项目跨网格 */
  2.       .item {
  3.         /* 从2行开始，跨2行 */
  4.         grid-row: 2 / span2;
  5.         /* 从1列开始，跨3列 */
  6.         grid-column: 1 / span3;
  7.       }

运行效果

合并写法，效果同上：

  1.       /* 合并写法 */
  2.       .item {
  3.         grid-area: 2/1 / span2/span3;
  4.       }

3. 用 grid 进行仿写页面

分析结构：左、右上、右下三大块，细节部分代码中有备注。在猪老湿的指点下，图片可实现自适应。谢谢老师指点。

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>用 grid 进行仿写页面</title>
  9.   </head>
  10.   <body>
  11.     <style>
  12.       /* 初始化 */
  13.       * {
  14.         margin: 0;
  15.         padding: 0;
  16.         box-sizing: border-box;
  17.         list-style: none;
  18.       }
  19.       a {
  20.         /* 去掉下划线 */
  21.         text-decoration: none;
  22.       }
  23.       /* 初始化1rem=100px */
  24.       html {
  25.         font-size: 100px;
  26.       }
  27.       /* 初始化网页字号16px */
  28.       body {
  29.         font-size: 0.16rem;
  30.       }
  32.       /* grid容器设置 */
  33.       .container {
  34.         height: 100vh;
  35.         /* 创建grid容器 */
  36.         display: grid;
  37.         /* 设置为2列：第1列2.4rem，剩下空间为第2列 */
  38.         grid-template-columns: 2.2rem minmax(7.6rem, 1fr);
  39.         /* 设置为2行，第1行高0.8rem，剩下空间为第2行 */
  40.         grid-template-rows: 0.8rem 1fr;
  41.       }
  43.       /* 左侧边栏样式 */
  44.       /* 设置左侧盒子样式后，右侧header和main会自动排列 */
  45.       .aside {
  46.         padding: 0.05rem 0.3rem;
  47.         grid-area: 1/1/3/2;
  48.         border-right: 1px solid #e6e6e8;
  49.       }
  50.       .logo {
  51.         margin: 0.1rem;
  52.         font-size: 0.32rem;
  53.         text-align: center;
  54.         font-weight: bold;
  55.       }
  56.       .aside ul {
  57.         padding: 0.15rem 0;
  58.         border-bottom: 1px solid #e6e6e8;
  59.       }
  60.       .aside li:hover {
  61.         cursor: pointer;
  62.         background-color: rgb(247, 247, 247);
  63.       }
  64.       .aside li,
  65.       .Sort_Menu h4 {
  66.         padding: 0.04rem 0.08rem;
  67.       }
  68.       .Home_Menu {
  69.         margin-top: 0.5rem;
  70.       }
  71.       .Sort_Menu li {
  72.         padding: 0.04rem 0.16rem;
  73.       }
  75.       /* 头部栏样式：采用flex盒子 */
  76.       /* 分析：搜索栏和导航两个项目，因此分散对齐 */
  77.       .header {
  78.         padding: 0.25rem 0.2rem;
  79.         display: flex;
  80.         place-content: space-between;
  81.         border-bottom: 1px solid #e6e6e8;
  82.       }
  83.       .seach {
  84.         background-color: rgb(247, 247, 247);
  85.         border: 1px solid #e6e6e8;
  86.       }
  87.       .seach input,
  88.       .seach button {
  89.         background-color: rgb(247, 247, 247);
  90.         border: none;
  91.       }
  92.       .seach input {
  93.         width: 4rem;
  94.       }
  95.       .seach button {
  96.         border-left: 1px solid #e6e6e8;
  97.         padding: 0 0.15rem;
  98.       }
  99.       .header a {
  100.         margin: 0 0.1rem;
  101.       }
  103.       /* 主体内容栏样式：采用flex */
  104.       .main {
  105.         margin: 0.15rem 0.2rem;
  106.         grid-area: 2/2/3/3;
  107.         display: grid;
  108.         grid-template-columns: repeat(5, 1fr);
  109.         grid-template-rows: repeat(4, 1fr);
  110.         /* 设置网格间距 */
  111.         grid-column-gap: 0.1rem;
  112.         grid-row-gap: 0.1rem;
  113.       }
  114.       .main img,
  115.       .main p {
  116.         /* 图片和文字宽度设为100%可以实现自适应大小 */
  117.         width: 100%;
  118.       }
  119.     </style>
  120.     <div class="container">
  121.       <!-- 左侧边栏----------------------------- -->
  122.       <div class="aside">
  123.         <div class="logo">好看视频</div>
  124.         <!-- 首页菜单 -->
  125.         <ul class="Home_Menu">
  126.           <li>首页</li>
  127.           <li>热门视频</li>
  128.           <li>放映厅</li>
  129.         </ul>
  130.         <!-- 收藏菜单 -->
  131.         <ul class="Collection_Menu">
  132.           <li>观看历史</li>
  133.           <li>我的收藏</li>
  134.         </ul>
  135.         <!-- 关注菜单 -->
  136.         <ul class="Follow_Menu">
  137.           <li>关注动态</li>
  138.           <li>暂无关注</li>
  139.         </ul>
  140.         <!-- 分类菜单 -->
  141.         <ul class="Sort_Menu">
  142.           <h4>频道分类</h4>
  143.           <li>影视</li>
  144.           <li>音乐</li>
  145.           <li>VLOG</li>
  146.           <li>游戏</li>
  147.           <li>搞笑</li>
  148.           <li>综艺</li>
  149.           <li>娱乐</li>
  150.           <li>动漫</li>
  151.           <li>生活</li>
  152.           <li>广场舞</li>
  153.           <li>美食</li>
  154.           <li>宠物</li>
  155.           <li>三农</li>
  156.           <li>军事</li>
  157.         </ul>
  158.       </div>
  159.       <!-- 头部栏------------------------------------- -->
  160.       <div class="header">
  161.         <div class="seach">
  162.           <input type="text" name="" id="" />
  163.           <button>搜索</button>
  164.         </div>
  165.         <div class="nav">
  166.           <a href="#">下载客户端</a>
  167.           <a href="#">创作中心</a>
  168.           <a href="#">消息</a>
  169.           <a href="#">上传视频</a>
  170.         </div>
  171.       </div>
  172.       <!-- 主体内容------------------------------------ -->
  173.       <div class="main">
  174.         <div>
  175.           <img src="./img/01.png" />
  176.           <p>[沧海行]一刀不切，矶钓中大牛，施钓上鱼全过程</p>
  177.         </div>
  178.         <div>
  179.           <img src="./img/02.png" />
  180.           <p>老公偷摸和高中暗恋对象通话，被媳妇发现后竟是为了这事儿？无语</p>
  181.         </div>
  182.         <div>
  183.           <img src="./img/03.png" />
  184.           <p>11岁女孩开飞机救了180人！却被外婆当成凶手《洛卡改变世界》</p>
  185.         </div>
  186.         <div>
  187.           <img src="./img/04.png" />
  188.           <p>小勇太反常了，居然花500块买礼物送我，最后小凤怒了！</p>
  189.         </div>
  190.         <div>
  191.           <img src="./img/05.png" />
  192.           <p>小池放生半桶大间蟹，听说海友抓到420元一斤硬货，跑去聊个痛快</p>
  193.         </div>
  194.         <div>
  195.           <img src="./img/06.png" />
  196.           <p>RM翻跟头挑战，三个跟头不落水才能成功，光洙腿太长尴尬了！</p>
  197.         </div>
  198.         <div>
  199.           <img src="./img/07.png" />
  200.           <p>广州十三行</p>
  201.         </div>
  202.         <div>
  203.           <img src="./img/08.png" />
  204.           <p>二牛给老丈人送封口机，给村口小卖部提字，雪中弥漫着墨香</p>
  205.         </div>
  206.         <div>
  207.           <img src="./img/09.png" />
  208.           <p>10人北极求生竞塞，大佬4只肥兔吃到撑，对手捕大鱼吃出意外！</p>
  209.         </div>
  210.         <div>
  211.           <img src="./img/10.png" />
  212.           <p>农村小伙脑洞大开，破烂不堪的水缸变身灶台，登哑舅舆鼎力相助</p>
  213.         </div>
  214.         <div>
  215.           <img src="./img/11.png" />
  216.           <p>外国人演绎《千手观音》？怎么感觉像千手蛇舞阿！大家认为呢？</p>
  217.         </div>
  218.         <div>
  219.           <img src="./img/12.png" />
  220.           <p>做错了事，是不是应当出来认个错？有钱就豪横吗</p>
  221.         </div>
  222.         <div>
  223.           <img src="./img/13.png" />
  224.           <p>热爱生活的人闪闪发光，周深演唱《生活总该迎着光亮》</p>
  225.         </div>
  226.         <div>
  227.           <img src="./img/14.png" />
  228.           <p>
  229.             北京卫视跨年冰雪盛典《错位时空》北部排位日记：结尾我真的万万没想到
  230.           </p>
  231.         </div>
  232.         <div>
  233.           <img src="./img/15.png" />
  234.           <p>北部排位日记：结尾我真的万万没想到</p>
  235.         </div>
  236.         <div>
  237.           <img src="./img/16.png" />
  238.           <p>人类身上最神奇的器官？竟然拥有超能力，真的有如此神奇吗？</p>
  239.         </div>
  240.         <div>
  241.           <img src="./img/17.png" />
  242.           <p>大叔偷学邻居家的手艺，靠着烂木头，每天都能挣到四五百块！</p>
  243.         </div>
  244.         <div>
  245.           <img src="./img/18.png" />
  246.           <p>当你懂得打开自己的思路，提升自己的眼界，你才能够拥有财富自由</p>
  247.         </div>
  248.         <div>
  249.           <img src="./img/19.png" />
  250.           <p>王者荣耀：被嫦定住后无法位移？用这一招解控相当于一个净化！</p>
  251.         </div>
  252.         <div>
  253.           <img src="./img/20.png" />
  254.           <p>面对重重的阻拦，玉点还能回到宫中吗？ 芳仪啊</p>
  255.         </div>
  256.       </div>
  257.     </div>
  258.   </body>
  259. </html>

运行效果

缩小效果

作业心得:grid布局真是太好用了，结合 flex布局，感觉什么都可搞定。

上一条：流程控制，循环，模板字面量，模板函数演示下一条：css样式来源、基本选择器、上下文选择器、选择器的权重
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多