1、移动端布局

——移动端的特点

手机屏幕小，一般的宽度直接设置为100%，不需要固定版心

• 分辨率

  屏幕的尺寸：指的是对角线的长度，一般用英寸来测量

  PC分辨率：1920*1080 指代的是电脑屏幕能排列像素点的个数（分为物理分辨率和逻辑分辨率）

  ​ 编写代码参照的是逻辑分辨率

——视口

使用meta标签设置视口的宽度，制作适配不同设备的网页

// 新建html代码时候自动生成,使得网页的宽度等于逻辑分辨率的尺寸
// 如果没有视口标签，网页的宽度是980px
<meta name="viewport" content="width=device-width, initial-scale=1.0">

// pc端也有视口的概念，但是pc端视口默认就是和屏幕分辨率大小一致，不需要进行处理

——二倍图

为了高分辨率下图片不会失真，设计师一般设计750px的图

使用像素大厨软件切换到二倍图下进行测量尺寸

——百分比布局

也可以叫做流式布局

效果：宽度自适应、高度固定（以前的布局方案）

——Flex布局

1、浮动布局会产生脱标的问题，flex布局则不会产生这类问题，非常适合结构化布局

• flex布局是浏览器提倡的布局模型
• 布局网页更加简单、灵活
• 避免浮动脱标的问题

2、使用方式：

• 父元素添加display：flex，子元素可以自动挤压或拉伸

组成部分：

• 弹性容器、弹性盒子、主轴（默认水平）、侧轴/交叉轴（默认垂直）

3、排列方式：

• 默认情况下：主轴默认水平方向，弹性盒子按照主轴方向排列

• 主轴对齐方式：

  justify-content调节弹性盒子在主轴的对齐方式
  // 属性值
  flex-start        // 起点开始依次排列(默认值)
  flex-end      // 终点开始依次排列
  center            // 沿主轴居中排列，盒子中间无间距
  space-around  // 间距添加在盒子两侧，盒子之间间距是盒子与容器间距的两倍
  space-between // 弹性盒子沿主轴均匀排列，间距在盒子之间，两侧无间距
  space-evenly  // 弹性盒子沿主轴均匀排列，所有间距相等

• 侧轴对齐方式

  align-items调节“所有弹性盒子”在侧轴的对齐方式
  // 属性值
  flex-start        // 默认值，起点位置依次排列
  flex-end      // 终点开始依次排列
  center            // 沿侧轴居中排列
  stretch           // 拉伸弹性盒子等于弹性容器（默认值，前提是弹性盒子没有高度）

• 上边两种都是添加到弹性容器上的属性，align-self添加到弹性元素身上

  align-self控制“某个单独的弹性盒子”在侧轴的对齐方式
  // 属性值与align-items相同

4、弹性盒子尺寸的特点：

• 若是弹性盒子没有高度，且aligh-items为默认值（拉伸），高度就会是弹性容器高度
• 若是弹性盒子没有宽度，弹性容器宽度按照内容的多少进行改变

5、伸缩比（伸缩比属性是添加给弹性盒子的）

• 使用flex属性修改弹性盒子伸缩比（flex表示占用弹性容器剩余尺寸的份数）

6、修改主轴方向

• 主轴默认在水平方向，使用flex-direction改变弹性盒子的主轴方向，实现内容垂直排列

  // 属性
  row               // 行，水平（默认值）
  column            // 列，垂直
  row-reverse       // 行，水平，从右向左
  column-reverse    // 列，垂直，从下往上

7、弹性盒子的换行

使用flex-wrap实现弹性盒子多行排列效果

flex布局模型默认是不会换行的，弹性盒子可以自由伸缩，所有的弹性盒子缩放后在一行显示

// 属性
nowrap          // 默认值，不换行
wrap            // 换行

8、调整行的对齐方式

使用align-content调整行的对齐方式

// 属性值与justify-content基本一致，但是没有space-evenly属性
// 默认值是space-between

2、移动适配

移动适配指的是页面元素的宽度随着设备宽度发生动态变化

——rem解决方案

1、rem

目标：能够使用rem单位设置网页元素的尺寸

• rem是一个相对单位
• 相对于html标签自号计算尺寸
• 1rem = 1HTML字号大小

使用：使用时候先设置html字号大小，宽高=rem * font-size

• 如何动态设置不一样的字号大小：

  使用媒体查询

• 设备不同字体大小设置多少合适：

  在rem方案中，默认将网页分成10等份。字号设置为视口宽度的1/10

2、媒体查询

媒体查询能够检测视口宽度，设置差异化css样式

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

这样写只能适配单个的屏幕大小，所以可以使用flexible.js适配移动端框架

3、flexible.js

原理：根据不同的视口宽度给网页中的根节点设置不同的字体大小

使用：将js文件引入后便可以实现适配效果，可以使用rem单位

4、less的使用

less是一个css的预处理器，可以使得css具备一定的逻辑和计算能力

• 因为rem需要进行计算，但是css不支持计算写法，所以可以使用less进行预处理

• 注意：浏览器不识别less文件，编写的是less文件网页引入的还是css文件

• 注释

  • 双斜线——单行注释（Ctrl + /）

  单行注释无法生成到css中

  • / 注释内容 /——块注释（Shift + Alt + A）

• 计算

  • 加减乘直接书写计算表达式
  • 除法需要添加括号，或者在 “ / ” 之前加一个点

• less嵌套

  • 为了快速生成后代选择器，less支持选择器的嵌套

  • & 不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

• 变量

  • 网页文字颜色一般都是一致的，所以可以定义一个颜色变量，在其他地方调用
  • 作用：存储数据、方便使用和修改
  • 定义变量：@变量名：值
  • 使用变量：css属性：@变量名

• less文件支持导入语法

  • @import "文件路径"; 一般都添加在less文件的开头位置

  可以将ess文件内容导入（如果导入的是less文件，可以省略后缀）

• 使用less语法导出css文件

  • css默认导出在less同级目录，可以通过导出自定义导出位置

  • 方法一：配置插件

    // settings.json配置文件
    "less.compile": {
      "out": "../css/",
    }

  • 方法二：书写导出代码

    // less文件首行添加单行注释
    添加："// out: ../css/"
    // 可以将css导出到与less文件夹同级的css文件夹中
    //css后还可以指定导出文件名

    // 有的less文件需要被其他less文件引入，不需要导出css
    添加："// out: false"

——vw/vh，未来的解决方案

使用vh/vw元素设置网页元素的尺寸

• 相对单位，相对视口尺寸计算元素尺寸
• 单位全名：viewport width / viewport height
• 1vw = 1 / 100视口宽度，vh = 1 / 100视口高度

设置盒子宽高时候，可以使用vh，也可以使用vw

• 如果进行了混用：
  • 部分手机存在全面屏，宽度相同，但是全面屏高度会大一些，混合使用会造成宽高比例不同

——vw/vh和rem相同点

1、rem

元素的像素大小 / 页面字体大小（视口宽度/10）= rem的值

2、vh / vw

元素像素大小 / 每vw（vh）的像素大小 = vh（vw）的值

3、响应式

——媒体查询

与移动适配媒体查询不同，响应式中媒体特性不会检测视口准确宽度，而是检测宽度范围

1. max-width（小于等于某一宽度）

   // 视口宽度小于等于800px时背景色为粉色
   @media (max-width:800px) {
   body {
       background-color: pink
   }
   }

2. min-width（大于等于某一宽度）

   // 大于768==>  粉色
   // 大于992==>  绿色
   // 大于1200==>天蓝色
   @media (min-width:768px) {
   body {
       background-color: pink
   }
   }
   @media (min-width:992px) {
   body {
       background-color: green
   }
   }
   @media (min-width:1200px) {
   body {
       background-color: skyblue
   }
   }
   媒体查询本质上仍是css，具有层叠性。大于768的全部设置为粉色，大于992的样式将粉色层叠掉，实现只有768~991设置粉色
   // 所以，以上代码如果不按顺序书写，失去层叠作用，无法实现响应式效果

   ​ 所以可以发现，min-width从小到大写，max-width从大到小写

3. 媒体查询完整写法（了解）

   @media 关键词 媒体类型 and (媒体特性) {css样式}
   ——关键词

   • and（多个媒体特性，用and连接）
   • only（只有一个媒体特性）
   • not（非，判断不是某个条件）

   ——媒体类型

   • screen（带屏幕的设备）
   • print（打印预览模式）
   • speech（屏幕阅读模式）
   • all（默认值，包括以上三种情形）

   ——媒体特征

   • width、height（视口的宽高）
   • max-width、max-height（视口最大宽高）
   • min-width、min-height（视口最小宽高）
   • orientation（屏幕方向）
     • portrait（竖屏）
     • landscape（横屏）

4. 外链引入媒体查询css

   
   // 一般只使用媒体特性
   // 外链引入媒体查询属性可以使特定情况下样式生效
   // 注意：媒体特性必须添加括号

——BootStrap

使用BootStrap框架开发响应式网页

1、样式使用

• 引入boootstrap.css样式表
• 使用样式中定义的类名

2、插件的使用

• 引入jquery.js
• 引入框架js文件（bootstrap.min.js）
• 使用框架插件

2、官方文档

​ [BootStrap中文文档](Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com))