响应式设计技术概览

什么是响应式开发

在移动互联网日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端设备上的展示和阅读。在响应式流行之前，通常的做法是对移动端单独开发一套特定的版本，但是，如果移动端设备越来越多的时候开发成本会比较大，因为需要做所有屏幕的适配。

响应式开发的目的就是：一个网站能兼容多种终端。实现不同屏幕分辨率的终端上浏览网页时有不同的展示方式，通过响应式设计能使网站在不同终端上有更好的浏览阅读体验。

响应式开发的技术

• 媒体查询（@media）；
• bootstrap；
• CSS 单位（rem、vh、vw、em 等）；
• CSS 布局（flex、grid 等）；
• 浏览器兼容性；
• viewport；

响应式设计可以兼容多终端，但这就需要写许多兼容性的代码，可能会出现工作量比较大，加载速度变慢的情况。对于展示性的网站，使用响应式设计还是很不错的，对于业务逻辑比较复杂的页面，响应式设计可能并不好做。对于低版本的浏览器，例如 IE8，如果不支持 CSS3 功能，不太容易实现响应式。

媒体查询

媒体查询可以查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。

比如当浏览器的视口宽度大于或等于 300px 时 body 将变成红色：

@media screen and (min-width: 300px){
   
    body{
   
        background-color: red;
    }
}

当浏览器视口的宽度小于或等于 500px 时 body 将变成绿色：

@media screen and (max-width: 500px){
   
    body{
   
        background-color: green;
    }
}

当浏览器的宽度介于 400px 到 600px 之间时，body 将变成橙色：

@media screen and (min-width: 400px) and (max-width: 600px) {
   
    body{
   
        background-color: orange;
    }
}

screen 表示主要用于屏幕的查询，如果不指定表示适用于所有设备（all），一般情况下是 screen，除此之外，还有 print，表示适用于在打印预览模式下在屏幕上查看的分页材料和文档。speech 主要用于语音合成器。

当屏幕的宽度不大于 400px 时，body 会变成紫色：

@media not screen and (min-width: 400px)  {
   
    body{
   
        background-color: purple;
    }
}

媒体查询是响应式布局的关键，通常情况下，查询视口的宽度，当宽度介于某些值之间时，布局会发生变化。关于媒体查询的更详细使用可以参考 MDN：