响应式布局的基本介绍及原理

响应式布局的介绍

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（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;
    }
}

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

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

以上就是响应式布局的原理,当然在实际开发者一般会使用如:bootstrap的响应式框架。