# 响应式web开发
## 概述(什么是响应式)
响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
此概念于2010年5月由国外著名网页设计师Ethan Marcotte(伊森·马科特)所提出意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。具体的实践方式由多方面组成,包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。
![image-20210424173702974](C:/Users/Administrator/Desktop/web/一阶段新大纲/day18/笔记/image-20210424173702974.png)
背景:移动互联网的发展,为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生,
目的:响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样就可以不必为不断到来的新设备做专门的版本设计和开发了。
初步认识响应式:响应式站点演示:https://segmentfault.com/
## 1、响应式需要的技术 :
1.设置视口标签
2.使用媒体查询
3.响应字体
4.响应图片
5.采用百分比
### 1.1 媒体查询
#### 1.1.1 标签设置
meta标签的设置
1.虚拟窗口:创建虚拟窗口,自定义窗口的大小和缩放功能,能适应移动设备的屏幕大小
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
2.使用高版本的IE内核浏览器或者Chrome浏览器
```html
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
http-equiv = "X-UA-Compatible":
这个是针对ie8以上浏览器的一个属性,ie8一下无法识别。就是说ie8以上浏览器遇到这个属性会执行content的描述,大小写不敏感。
```
#### 1.1.2 使用媒体查询适配对应样式
1.可以根据设备显示器的特性,来设置不同的css的样式
### 1.2 媒体查询的引入方式和语法
#### 1.2.1 媒体查询的语法
```html
媒体查询的语法:
@media mediaType and (media feather) {
选择器 {
属性名:属性值
}
}
多个条件:
@media mediaType and (media feather) and (media feather){
选择器 {
属性名:属性值
}
}
mediaType:设备类型
media feather:媒体特性表表达式
1.mediaType设备类型:
all:所有的多媒体设备
print:打印机或打印预览
screen:电脑屏幕、平板电脑、智能手机等
speech:屏幕阅读器等发声设备
2.media feather:媒体特性表达式
width:浏览器的宽度
height:浏览器的高度
max-width:最大宽度
min-width:最小宽度
device-width:设备宽度
device-height:设备高度
max-device-width:最大设备宽度
min-device-width:最小设备宽度
orientation:设备的窗口朝向
1.横屏 宽度比高度大 orientation:landscape;
2.竖屏 高度比宽度大 orientation:portrait;
```