????????????????????????????????????????响应式web开发

概述（什么是响应式）

响应式设计的页面会根据用户的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

此概念于2010年5月由国外著名网页设计师Ethan Marcotte(伊森·马科特)所提出意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。

背景：移动互联网的发展，为了满足移动互联网多终端显示的需求催生了响应式式布局的诞生，

目的：响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样就可以不必为不断到来的新设备做专门的版本设计和开发了。

初识响应式：响应式站点演示：https://segmentfault.com/

响应式开发原理（实现步骤）

1、设置 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2 、创建流式布局

响应式在设计和布局初期就要考虑页面如何在多终端展示，因此需要根据页面效果分析创建方便后续处理版式变化的流式布局，主要包括以下几个方面。

2.1 模块处理

对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）；

无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化，常见的情形如下：

模块中内容：挤压－拉伸；

模块中内容：换行－平铺；

l 模块中内容：删减－增加；

| 模块位置的变化

其中涉及到的布局技巧的应用

如：尽量少使用绝对宽度、百分比布局、弹性盒、弹性网格、浮动技巧、定位技巧的应用、box-sizing,显示隐藏（display:block,display:none,overflow:hidden）的应用

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-size:100% auto;
 ? ? background-size:auto 100%;
?
 ? }

background-size属性值设置为百分比值或cover,contain等，将实现背景图片的大小跟随元素大小响应变化。

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查询来设置不同屏幕区间的样式，这是响应式布局的核心

对于@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优先：（优先保证PC端显示效果）

/* 大型设备（大台式电脑，1200px 以上） */

@media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */

@media screen and (max-width:992px){ ... }/* 小型设备（平板电脑，992px 以下） */

@media screen and (max-width:768px){ ... }/* 超小型设备（手机，768px 以下） */

响应式项目

项目介绍

项目名称：小U后台管理系统
项目描述：小U是一套响应式跨平台电商后台管理系统包含了商品管理、订单管理、用户管理、商品信息管理等功能模块。我们主要完成首页、商品添加页面、商品信息管理、登录、注册等页面
效果预览
开发工具以及技术栈
- 开发工具
  - VScode Photoshop、蓝湖主流浏览器
- 技术栈
  - 利用媒体查询与综合布局的形式，实现响应式
采取结构与样式相分离，模块化开发

项目搭建

文件目录
- 概述：根据项目名称创建项目文件夹,推荐用对应的英文单词命名。 html、css、img、js 文件均归档至项目名称目录中
- 目录示例
  - 项目文件夹
    - 样式类图片文件夹（images）
    - 样式文件夹（css）
    - 字体类文件夹（fonts）
    - 脚本文件夹（js）
    - 产品类图片文件夹（upload）
样式文件
- 初始化样式（base.css）
- 公共样式(common.css)