拉勾网 移动端流式布局与rem布局整页制作

涉及到的知识点

移动端适配方案

• 移动端必须先设置

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  //设备宽自适应，初始比例1.0，最好禁止用户缩放操作。
  

---

移动端流式布局（百分比布局）

• 弹性布局

  display: flex;  
  

• 元素大小不随设备改变而发生变化，而元素之间的间距会发生变化

• 好处：大屏显示更多内容。

• 坏处：宽屏比例不协调。

---

rem布局（等比缩放布局）

• 可以适配不同的型号，元素大小随设备改变而发生变化，而元素之间的间距在比例上是不变的。

• 以i6为参考模板，量好数据。

• font-size动态设置

  html { font-size: 26.66667vw;}//这里在i6下，会转成100个像素
  body { font-size: 16px;}
  

• vscode工具px to rem改成对应的数值100

• 选中所有css代码，alt+z，把px换算成rem

单位

em:是一个相对单位，1em等于当前元素或父元素的font-size值。
rem:是一个相对单位，1rem等于根元素的font-size值。
vw/vh:把屏幕分为100份，1vw等于屏幕宽的1%。

---

justify-content

• 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

• 可选值

  flex-start;(initial) //容器的开头。
  flex-end;//容器的结尾。
  center;//容器的中心。
  space-between; //各行之间留有空白的容器内（即两端点对齐）
  space-around;//各行之前、之间、之后都留有空白的容器内。
  inherit;//从父元素继承该属性。
  

---

align-items

• 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

• 可选值

  stretch;(initial) //元素被拉伸以适应容器。
  center; //容器的中心。
  flex-start; //容器的开头。
  flex-end; //容器的结尾。
  baseline; //容器的基线上。
  inherit; //从父元素继承该属性。
  

---

图片

• 流式布局

• rem布局

---

GitHub

https://github.com/AlubNoBug/Lagou

---

视频讲解

https://www.bilibili.com/video/BV1x64y1M7No?p=199

---

本文作者：AlubNoBug

本文链接：https://www.cnblogs.com/AlubNoBug/p/13757501.html