移动端开发之flex布局-rem适配-vh vw适配

flex弹性布局

一、定义

采用flex布局的元素，称为flex容器，里面的子元素为item。

二、语法

（1）块级元素： display：flex

（2）行内元素： display:inline-flex

设为flex布局以后，flex item的float、clear、vertical-align属性将失效

三、flex容器的属性

容器属性	说明
flex-direction	决定主轴的方向(项目的排列方向)
flex-wrap	定义是否换行
flex-flow	direction和wrap的复合属性，默认值为row和nowrap
justify-content	定义项目在主轴上的对齐方式
align-items	定义项目在侧轴上的对齐方式
align-content	定义多根轴线的对齐方式，若项目只有一根轴线，该属性无效

• flex-direction

flex-direction:row;	项目水平排列，顺序为从左到右
flex-direction:row-reverse;	项目水平排列，顺序为从右到左
flex-direction:column;	项目垂直排列，顺序为从上到下
flex-direction:column-reverse;	项目垂直排列，顺序为从下到下

• flex-wrap

nowrap(默认值)	不换行,如果盒子宽度容纳不下，将等比例缩小盒子大小
wrap	换行,顺序不改变,第一行仍在上方
wrap-reverse	换行,顺序改变,第一行和第二行调转

• flex-flow

​ 是direction和wrap的简写,为复合属性,默认值分别为row和nowrap

• justify-content(主轴对齐方式)

属性值	说明
flex-start	左对齐
flex-end	右对齐
center	居中
space-between	项目两端对齐，各项目之间间隔相等
space-around	各项目之间间隔相等，且是一左一右盒子与边框距离的两倍，盒子与边框的距离也相等
space-evenly	表示item之间左右的间距以及项目和边框之间的距离都相等

• lign-items（交叉轴对齐方式）

属性值	说明
flex-start(默认值)	顶部对齐
flex-end	底部对齐
center	居中
base-line	以项目的第一行文字基线对齐
stretch(默认值)	若项目未设置高度或高度未auto，将占满整个容器的高度

rem

• 网页效果

  • 屏幕宽度不同,网页元素尺寸不同(等比缩放)

• px单位或百分比布局不能实现

  • px单位是绝对单位
  • 百分比布局特点宽度自适应,高度固定

• 适配方案

  • rem

  • vw/vh

• rem单位

  • 相对单位

  • rem单位是相对于HTML标签的字号计算结果

  • 1rem = 1HTML字号大小

• 媒体查询

  • 媒体查询能够检测视口的宽度,然后编写差异化的css样式

  • 当某个条件成立,执行对应的css样式

@media (媒体特性) {        @media (width:320px) {
    选择器 {					html {
        css属性					font-size:32px;	
    }								}
}								}

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

• rem单位尺寸 :

1. 根据视口宽度，设置不同的HTML标签字号

2. 书写代码，尺寸是rem单位

   确定设计稿对应的设备的HTML标签字号

   ​ 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

3. rem单位的尺寸 :

   N * 37.5 = 68 → N = 68 / 37.5 rem

   单位的尺寸 = px单位数值 / 基准根字号

• flexible

  • flexible.js是手淘开发出的一个用来适配移动端的js框架。

  • 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

less

• less是一个css预处理器,less文件后缀是.less
• 扩充了css语言,使css具备一定的逻辑性,计算能力
• 注意:浏览器不识别less代码,目前阶段,网页要引入对应的css文件

编译插件

• Easy Less：
  • vscode插件
  • 作用：less文件保存自动生成css文件

less注释

• // 单行注释(在css文件中无法识别 不显示)
• /* */多行注释(快捷键： shift + alt + A)

less语法

• 运算：

  • 加、减、乘直接书写计算表达式
  • 除法需要添加 小括号 或 .
  • 注意：表达式存在多个单位以第一个单位为准

• 嵌套：

  • 作用：快速生成后代选择器

  语法：
  .father {
      color:red;
      .son {
          width:100px;
      }
  }
  注意：&不生成后代选择器,表示当前选择器,通常 配合伪类或伪元素
  .father {
      color:red;
      &:hover {
          color:green;
      }
  }
  

• 变量

  • 存储数据，方便使用和修改。

• 语法：

  • 定义变量：@变量名: 值;
  • 使用变量：CSS属性：@变量名;

• 导入：

  • 导入: @import “文件路径”；

• 导出：

  • 使用Less语法导出CSS文件

• 方法一：

  • 配置EasyLess插件， 实现所有Less有相同的导出路径
  • 配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
  • “out”:“…/css/”

• 方法二：

  • 控制当前Less文件导出路径 Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
  • 例：// out:./文件夹/文件名称

• 禁止导出：

  • 在less文件第一行添加：// out:false

VW / Vh

• 相对单位
• 相对视口的尺寸计算结果
• vw：viewport width
  • 1vw = 1/100视口宽度
• vh：viewport height
  • 1vh = 1/100视口高度

vw单位尺寸

• 确定设计稿对应的vw尺寸(1/100视口宽度)
  • 查看设计稿宽度 —> 确定参考设备宽度 —> 确定vw尺寸(1/100视口宽度)
• vw单位的尺寸 = px单位数值/(1/100视口宽度)

vh适配原理

• 确定设计稿对应的vh尺寸(1/100视口宽度)

  • 查看设计稿宽度 —> 确定参考设备高度 —> 确定vh尺寸(1/100视口高度)

• vh单位的尺寸 = px单位数值/(1/100视口高度)

• 注意：vw和vh不会混用

  • vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形