# 响应式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;
```
* 媒体查询小案例--只在打印设备显示
```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>
```
#### 1.2.2 媒体查询的引入方式
##### 1.内部方式引入
```html
<style>
body {
background-color: red;
}
/* 横屏 宽大于高 */
@media screen and (orientation: landscape) {
body {
background-color: yellow;
}
}
/* 竖屏 高大于宽 */
@media screen and (orientation: portrait) {
body {
background-color: pink;
}
}
</style>
```
##### 2.外链式
```css
在html的head标签的内部使用link标签引入外部的css文件(后缀名为.css的文件)
<head>
<link rel="stylesheet" href="./css/demo.css">
</head>
body {
background-color: pink;
}
/* 横屏 宽大于高 */
@media screen and (orientation: landscape) {
body {
background-color: tomato;
}
}
/* 竖屏 高大于宽 */
@media screen and (orientation: portrait) {
body {
background-color: yellowgreen;
}
}
<!-- 只有横屏时有样式 -->
<link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: landscape)">
<!-- 只有竖屏时有样式 -->
<link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: portrait)">
```
## 2、 响应式开发原理(实现步骤)
### 2.1 设置 viewport
### 2 .2 创建流式布局
响应式在设计和布局初期就要考虑页面如何在多终端展示,因此需要根据页面效果分析创建方便后续处理版式变化的流式布局
#### 2.2.1 模块布局响应
对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计);
无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化,主要的布局方式主要有以下几种
· 模块中内容:挤压-拉伸;
![img](file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml9036\wps1.jpg)
· 模块中内容:换行-平铺;
![img](C:/Users/Administrator/Desktop/web/一阶段新大纲/day18/笔记/wps2.jpg)
l 模块中内容:删减-增加;
![img](file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml9036\wps3.jpg)
n 模块位置的变化
![img](file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml9036\wps4.jpg)
其中涉及到的布局技巧的应用
如:尽量少使用绝对宽度、百分比布局、弹性盒、弹性网格\浮动技巧、定位技巧的应用、box-sizing,显示隐藏的应用
#### 2.2.2 响应式图片
##### 1.内容图片响应
在html页面中的图片,比如文章里插入的图片我们都可以通过css样式使用百分比,来进行控制图片缩放:
```
#wrap img{
width:100%;
}
```
以上代码将强制图像占据其父元素空间的100%,当父元素宽度改变时图像元素也会相应改变,而高度默认为auto,图像自身宽高比例不会发生变化
```
#wrap img{
max-width:100%;
}
```
以上代码将实现父元素宽度小于图像本身宽度时,图像跟随父元素改变,当父元素宽度大于图片时,图片宽度以自身本身宽度显示
##### 2.背景图片处理
除了img标签的图片外我们经常会遇到背景图片,比如logo为背景图片:
```
#logo a{
display:block;
width:100%;
height:40px;
text-indent:55rem;
background-img:url(logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
}
```
background-siz属性值设置为百分比值或cover,contain等,将实现背景图片的大小跟随元素大小响应变化。
#### 2.2.3 响应式文字
相对单位在字号、行高中的应用可以一定程度上提升效率精简代码
```
@media screen and (orientation:landscape){
.box{
font-size:20px;
line-height:30px;
}
.box h2{
font-size:40px;
line-height:60px;
}
}
```
```
@media screen and (orientation:portrait){
.box{
font-size:12px;
line-height:24px;
}
.box h2{
font-size:24px;
line-height:36px;
}
}
```
改写后
```
@media screen and (orientation:landscape){
.box{
font-size:20px;
line-height:1.5;
}
.box h2{
font-size:2em;
}
}
@media screen and (orientation:portrait){
.box{
font-size:12px;
}
}
```
## 3、屏幕区间设定
使用[@Media查询](https://www.runoob.com/cssref/css3-pr-mediaquery.html)来设置不同屏幕区间的样式,这是响应式布局的核心
对于@Media查询的分界点,这个可以根据自己的项目来调整,设置合适自己项目的布局分界点。在设置分界点时,要注意先后顺序,当使用max-width数值大的在前面,数值小的在后面;当使用min-width时,数值小的放前面,数值大的放后面。
下面列出了在项目开发时设置的布局分界点参考:
移动端优先:
```
/*超小型设备(手机,768px以下)*/
@media screen and (min-width:768px) { ... } /* 小型设备(平板电脑,768px 以上) */
@media screen and (min-width:992px){ ... }/* 中型设备(台式电脑,992px 以上) */
@media screen and (min-width:1200px){ ... }/* 大型设备(大台式电脑,1200px 以上) */
```
pc优先:
```
/* 大型设备(大台式电脑,1200px 以上) */
@media screen and (max-width:1200px) { ... } /* 中型设备(台式电脑,1200px 以下) */
@media screen and (max-width:992px){ ... }/* 小型设备(平板电脑,992px 以下) */
@media screen and (max-width:768px){ ... }/* 超小型设备(手机,768px 以下) */
```
## 4、响应式项目
### 4.1 项目介绍
- 项目名称:小U后台管理系统
- 项目描述:小U是一套响应式跨平台电商后台管理系统包含了商品管理、订单管理、包含商品管理、订单管理、会员管理、促销管理、等模块。
我们主要完成商品管理,商品添加页面、商品信息页
- 效果预览
- 开发工具以及技术栈
- 开发工具
- VScode
Photoshop、蓝湖
主流浏览器
- 技术栈
- 利用媒体查询与综合布局的形式,实现响应式
- 采取结构与样式相分离,模块化开发
### 4.2 项目搭建
- 文件目录
- 概述:根据项目名称创建项目文件夹,推荐用对应的英文单词命名。
html、css、img、js 文件均归档至项目名称目录中
- 目录示例
- 项目文件夹
- 样式类图片文件夹(images)
- 样式文件夹(css)
- 字体类文件夹(fonts)
- 脚本文件夹(js)
- 产品类图片文件夹(upload)
- 样式文件
- 初始化样式(base.css)
- 公共样式(common.css)
### 4.3 项目模块化开发
- 讲解—【首页框架】
- 讲解—【左侧边栏响应式实现】
- 讲解—【右侧列表】
- 讲解—【顶部菜单小屏幕下拉效果】
### 4.4 项目实战与上传
## 5、响应式布局优缺点
优点
- 面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题
- 节省设计、开发、维护成本【不再特定的维护PC页面,移动页面】
缺点
- 流式布局对版面设计有一定要求存在局限性
- 兼容各种设备工作量大,效率低下
- 代码累赘,会出现隐藏无用的元素,加载时间加长
- 影响用户体验(一定程度上改变了网站原有的布局结构,会出现用户混淆的情况,)
- 兼容问题(IE8以下不支持)