响应式布局的介绍+媒体查询

响应式布局的介绍

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（pc、手机、平板）

什么是响应式布局

早期：

同一个页面需要开发不同设备的版本，公司开发成本较高

• pc端需要开发写一套页面，专门给pc端看
• 移动端再开发一套页面，专门给移动端看

响应式布局（记忆）：

同一个页面只需要开发一套网页，公司开发成本较低

• 只需要写一套代码，同时给pc端和移动端看

看看微金所项目~

响应式开发的原理（记忆）

动态根据当前屏幕的宽度，自动改变页面中盒子的宽度、盒子的显示或隐藏

响应式开发的优缺点

优点：

• 对于不同设备只需要开发一套网页即可，公司开发成本较低
• 一套网页可以适配多个终端

**缺点： **

• 一个页面需要兼容多个终端，考虑的情况多种，开发效率较慢
• 代码会更多，网页的加载速度较慢

响应式开发的现状

在国内并不是很流行，国外较多

• 如果已经有了一套pc端网页，此时直接再写一套移动端网页即可，此时不需要使用响应式布局（比如：京东、淘宝）

• 如果开发一套网页都没有，是新建的项目，此时可以考虑使用响应式，写一套即可兼容多个设备。

• 比较简单的网页，可以考虑使用响应式，但是复杂的网页考虑的情况会很多，一般不用。

响应式开发与pc+移动开发的比较

分类	pc端+移动端网页开发	响应式开发
应用场景	已有pc端网页，只需要再开发一套移动端网页即可	对于新建网页，可以使用响应式写一套兼容多个设备即可
开发效率	针对性强，开发效率高	需要兼容各种终端，考虑情况更多，开发效率低
适配情况	只能适配移动端或者PC端，其他设备（平板）体验较差	可以适配各种终端
加载速度	代码简洁，加载快	代码相对复杂，加载慢

-------------------

响应式开发的屏幕分类

在响应式开发中需要动态根据屏幕的宽度改变样式，但是不可能每变化1px就改变样式。

在响应式开发中，把各种屏幕宽度分为四大类！！

设备屏幕的分类

分类名称	宽度范围
超小屏设备	0 ~ 768px
小屏设备	768px ~ 992px
中屏设备	992px ~ 1200px
大屏设备	1200px ~ 正无穷

媒体查询

刚刚说了响应式原理是：动态根据当前屏幕的宽度，自动改变页面中盒子的宽度、盒子的显示或隐藏

所以需要根据不同屏幕的宽度改变样式。

可以通过css3中新增的媒体查询完成效果。

**媒体查询（Media Query）：**是CSS3新增的方法，可以通过动态查询屏幕的宽度，根据不同的屏幕宽度设置样式是否生效！！

语法：

@media screen and (条件) {
    选择器......
}

作用： 只有当屏幕宽度满足条件时，媒体查询中的选择器才能生效！！！

注意点： 媒体查询仅仅只是控制选择器是否生效，不会提升选择器的优先级！！

具体谁说了算，还是需要看优先级

条件：

• min-width：样式生效的屏幕最小宽度

  只有当屏幕宽度大于等于该宽度时，样式才会生效

  /* 样式生效的最小宽为600px——》只有当屏幕宽度大于等于600px时，样式才会生效！！*/
  @media screen and (min-width:600px) {
      div {
          width: 400px;
          height: 400px;
          background-color: green;
      }
  }
  

• max-width ：样式生效的屏幕最大宽度

  只有当屏幕宽度小于等于该宽度时，样式才会生效

  /* 样式生效的最大宽为800px——》只有当屏幕宽度小于等于800px时，样式才会生效*/
  @media screen and (max-width:800px) {
      div {
          width: 400px;
          height: 400px;
          background-color: blue;
      }
  }
  

• width ：样式生效的宽度

  只有当屏幕宽度正好等于该宽度时，样式才会生效

  /* 样式只在700px宽度的时候才会生效 */
  @media screen and (width:700px) {
      div {
          width: 400px;
          height: 400px;
          background-color: purple;
      }
  }
  

如果需要在600~800之间样式生效，怎么写？？

一个媒体查询中可以同时写多个条件，中间通过and连接即可

/* 样式在 600~800中间生效 */
@media screen and (min-width:600px) and (max-width:800px) {
    div {
        width: 400px;
        height: 400px;
        background-color: orange;
    }
}

使用媒体查询完成响应式适配

可以通过媒体查询实现不同终端的布局和样式的切换，完成响应式布局。

**需求：**手动设置全局容器.container的响应式适配四种屏幕。

/*
需求：
	超小屏幕: 0 - 768px      	版心：100% 	背景颜色：绿色
	小屏设备: 768px - 992px  	版心：750px 	背景颜色：蓝色
	中屏设备: 992px - 1200px 	版心：970px 	背景颜色：黄色
	大屏设备: 1200 ~  正无穷     版心：1170px   背景颜色：粉色
*/

弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦。真正开发中我们会借助一些响应式的框架，比如bootstrap。