<commit_before># 达内前端培训 CH16_Bootstrap

[TOC]

## unit01：响应式网页、bootstrap起步、全局CSS样式

### 什么是响应式网页

- Responsive Web Desien：响应式/自适应网页设计，2010年5月，由<NAME>专为改进移动互联网l浏览器提出的概念，基本概念为：
  - 集中创建页面的图片和排版大小，可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕方向等)进行相应的布局————即一个页面可以兼容各种终端，无需编写多个不同的版本。
  - 说白了，编写一个网页可以很好的显示在各种屏幕大小的终端上。
  - 总结：2010年5月提出的“Responsive Web Page”，响应式网页/自适应网页，一个页面可以根据浏览器设备的不同或使用环境的不同，自动的修改布局、修改图片尺寸、文字大小，从而可以保证所有的设备都正常的浏览体验。
  - 好处：各种设备下都正常显示
  - 不足：页面代码结构需要考虑到多种设备，编写难度更大，代码结构更加复杂，一般只适用于

![image.png-55.6kB][1]

### 如何测试响应式网页

- 使用真实物理设备测试————测试效果最好但麻烦
- 使用第三方模拟软件测试————测试效果有待验证
- 使用浏览器提供的设备模拟测试————最简单但有时测试效果与真实物理设备有所不同，需要进一步验证

> 行业小知识：viewport，视口，屏幕中浏览网页的那个窗口！
> 早期的手机浏览PC网页时只能把网页进行缩小，影响浏览体验；
> iOS系统提出l额viewport的概念————承载网页的窗口，可以随意指定宽高，但不能小于手机物理屏幕，可以让任意大小的网页不经过缩放直接显示。
> Android后来也引入了此概念————只有移动端浏览器才有此概念。

### 如何编写响应式网页

- 必须声明viewport元标签
  - `<meta name="viewport" content="... ... ...">`
  - `width=device-widht,` --> 指定 视口 的宽度
  - `inital-scale=1.0,`   --> 设置 视口 初始化的放大比例
  - `user-scalable=no`    --> 设置 视口 为用户不能缩放(1/0/yes/no)
  - `minimum-scale=1.0`   --> 允许的最小缩放倍率
  - `maximum-scale=1.0`   --> 允许的最大缩放倍率
- 容器尽量使用相对尺寸
  - 尽量避免绝对尺寸：`div.container{width: 1211px;}`
  - 使用相对尺寸代替：`div.container{width: 80%;}`
- 文字大小尽量使用相对尺寸
  - 尽量避免绝对尺寸：`.text{font-size: 12px;}`
  - 使用相对尺寸代替：`.text{font-size: 0.5rem;}`
- 图片尽量使用相对尺寸：
  - 尽量避免绝对尺寸：`img{width: 200px}`
  - 使用相对尺寸代替：`img{width: width:50%;}` 或 `img{max-width: width:50%;}`
  - width 和 max-width 的区别：两者都是指定在父容器中的宽度占比，但width属性可以随着父容器变大而无限变大；而 max-width 却限制放大同时不能超过自己的原始大小
- 页面布局尽量采用流式布局(Fluid)
  - float:left;  或者  display:inline-block;
- 响应式网页必须 CSS3 Media Query 技术

- em和rem的区别<commit_msg>update 达内-CH18-CSS3 Media Query<commit_after># 达内前端培训 CH16_Bootstrap

[TOC]

## unit01：响应式网页、bootstrap起步、全局CSS样式

### 什么是响应式网页

- Responsive Web Desien：响应式/自适应网页设计，2010年5月，由<NAME>专为改进移动互联网l浏览器提出的概念，基本概念为：
  - 集中创建页面的图片和排版大小，可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕方向等)进行相应的布局————即一个页面可以兼容各种终端，无需编写多个不同的版本。
  - 说白了，编写一个网页可以很好的显示在各种屏幕大小的终端上。
  - 总结：2010年5月提出的“Responsive Web Page”，响应式网页/自适应网页，一个页面可以根据浏览器设备的不同或使用环境的不同，自动的修改布局、修改图片尺寸、文字大小，从而可以保证所有的设备都正常的浏览体验。
  - 好处：各种设备下都正常显示
  - 不足：页面代码结构需要考虑到多种设备，编写难度更大，代码结构更加复杂，一般只适用于

![image.png-55.6kB][1]

### 如何测试响应式网页

- 使用真实物理设备测试————测试效果最好但麻烦
- 使用第三方模拟软件测试————测试效果有待验证
- 使用浏览器提供的设备模拟测试————最简单但有时测试效果与真实物理设备有所不同，需要进一步验证

> 行业小知识：viewport，视口，屏幕中浏览网页的那个窗口！
> 早期的手机浏览PC网页时只能把网页进行缩小，影响浏览体验；
> iOS系统提出l额viewport的概念————承载网页的窗口，可以随意指定宽高，但不能小于手机物理屏幕，可以让任意大小的网页不经过缩放直接显示。
> Android后来也引入了此概念————只有移动端浏览器才有此概念。

### 如何编写响应式网页

- 必须声明viewport元标签
  - `<meta name="viewport" content="... ... ...">`
  - `width=device-widht,` --> 指定 视口 的宽度
  - `inital-scale=1.0,`   --> 设置 视口 初始化的放大比例
  - `user-scalable=no`    --> 设置 视口 为用户不能缩放(1/0/yes/no)
  - `minimum-scale=1.0`   --> 允许的最小缩放倍率
  - `maximum-scale=1.0`   --> 允许的最大缩放倍率
- 容器尽量使用相对尺寸
  - 尽量避免绝对尺寸：`div.container{width: 1211px;}`
  - 使用相对尺寸代替：`div.container{width: 80%;}`
- 文字大小尽量使用相对尺寸
  - 尽量避免绝对尺寸：`.text{font-size: 12px;}`
  - 使用相对尺寸代替：`.text{font-size: 0.5rem;}`
- 图片尽量使用相对尺寸：
  - 尽量避免绝对尺寸：`img{width: 200px}`
  - 使用相对尺寸代替：`img{width: width:50%;}` 或 `img{max-width: width:50%;}`
  - width 和 max-width 的区别：两者都是指定在父容器中的宽度占比，但width属性可以随着父容器变大而无限变大；而 max-width 却限制放大同时不能超过自己的原始大小
- 页面布局尽量采用流式布局(Fluid)
  - float:left;  或者  display:inline-block;
- 响应式网页必须 CSS3 Media Query 技术

### CSS3 Media Query

- Media：指浏览网页的设备，如screen、tv、projection(投影)、printer、tty(字符终端)、braille
- Query：使用CSS自动查询浏览设备的特性，如位深、解析度、宽高、水平/竖立方向...
- CSS3 Media Query：根据浏览网页的设备类型不同，或者特性不同，而有选择的执行某些CSS，放弃执行另外的。

#### 媒体查询具有两种方法

- 有选择性的执行符合条件的外部CSS文件
  - `<link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/pad.css">`
  - 缺陷：即使不满足当前浏览器条件的CSS文件，也会被浏览器下载。

- **有选择性的执行CSS片段中的部分内容**
  - `@media screen and (min-width:768px) and (max-width:991px) { h3: {display: none} }` 


- em和rem的区别
{'fraction_non_alphanumeric': 0.1646036344482486, 'fraction_numerical': 0.027916776402422964, 'mean_word_length': 5.351170568561873, 'pattern_counts': {'":': 0, '<': 8, '<?xml version=': 0, '>': 26, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1443079', 'n_tokens_mistral': 2751, 'n_tokens_neox': 3289, 'n_words': 191}