## 1、什么是响应式设计
也叫响应式布局,响应式开发
实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的
### 响应式布局
原理:
* 一个网站适配所有终端,实现不同屏幕分辨率下的终端上网页的不同布局;
* 使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而达到适配不同屏幕的目的
简单的说:
响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化
自适应:元素随着屏幕发生宽高大小变化
### 优缺点
优点:
* 1、减少工作量,网站、设计、代码、内容都 只需要一份,多出来的工作量只是JS脚本、CSS样式做一些改变
* 2、节省设计、开发、维护成本【不再特定的维护PC页面,移动页面】
* 3、面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题
缺点:
* 1、兼容问题(IE8以下不支持)
* 2、需要加载更多的样式和脚本文件
* 3、代码累赘,会出现隐藏无用的元素,加载时间加长
* 4、页面设计比较难于精确定位和控制
* 5、影响用户体验(一定程度上改变了网站原有的布局结构,会出现用户混淆的情况,)
Bootstrap框架、苹果官网和星巴克官网使用的响应式布局
响应式网站演示:https://segmentfault.com/
## 2、响应式需要的技术 :
1.设置视口标签
2.使用媒体查询
3.响应字体
4.响应图片
5.采用百分比
### 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的描述,大小写不敏感。
```
#### 2、使用媒体查询适配对应样式
可以根据设备显示器的特性,来设置不同的css的样式
### 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;
3.操作符
- and(与、和)
not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)
only: 用来定某种特别的媒体类型。
/* 除了 speech 设备都可以用*/
@media not speech {
body {
background-color: tomato;
}
}
/* 只能在screen设备能用 */
@media only screen {
body {
background-color: yellowgreen;
}
}
```
* 媒体查询小案例--只在打印设备显示
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.txt {
font-size: 30px;
display: none;
}
/* 媒体查询 打印设备 在浏览器中鼠标右击,有打印两个字 点击就可以哦 */
@media print {
.txt {
display: block;
}
}
/* display: none; 隐藏元素
display: block; 显示元素
*/
</style>
</head>
<body>
<p class="txt">你看不见我,只能在打印设备才能看的见我哦</p>
</body>
</html>