什么是响应式布局？

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。

响应式布局的优缺点？

优点：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点

兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

响应式布局的设计

在面对不同的尺寸的设备时怎样鉴别呢？我们需要用到CSS3的媒介查询技术（Media Query）

什么是媒体查询？

媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,例如width,height,color.CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身.
媒体查询级别较高，不在html之下，所以用相对单位对其进行设置都是相对于浏览器设置的。

基本写法：

@media all and(min-width:800px) and (orientation:
landscape){
    ...
}

媒体查询的逻辑操作符

and not only , 就是链接表达式
and：与全部匹配
,：或任意条件匹配一个
not：非
only：防止老旧的浏览器，不支持带媒体属性的查询，而应用到给定的样式

媒体查询

媒体属性简介

width：视口宽度
height：视口高度
device-width：渲染表面的宽度，就是设备屏幕的宽度
device-height：渲染表面的高度，就是设备屏幕的高度
orientation：检查设备处于横向还是纵向
aspect-ratio：基于视口宽度和高度的宽高比。 width/height 如：16/9,4/3
device-aspect-ratio：渲染表面的宽度，就是设备屏幕的宽度
color：每种颜色的位数bits 如：min-color：16位 8位
resolution：检测屏幕或打印机的分辨率
以上属性都可以添加min-或max-前缀

视口viewport

什么是视口？
视口是与设备相关的一个矩形区域，坐标单位是与设备相关的。
为了小屏幕（手机）的显示，将视口分为以下状态以达到显示目的

布局视口(layout viewport)：用一个虚拟的960px宽度或更高先把网页布局出来宽度不变
可视视口(visual viewport)：在手机呈现出来的区域的宽度会通过用户的缩放等操作进行改变
理想视口(ideal viewport)：布局视口在一个设备上的最佳尺寸为构建手机浏览器优化的页面而添加的

例如百度首页对视口的设置

<meta name='viewport' content='width=device-width,//使用理想视口
minimum-scale=1.0,//最小縮放比例
maximum-scale=1.0,//最大缩放比例
user-scalable=no'/>//禁用用户缩放

响应式图片

在网站设计中，针对于手机端的设计使用大屏幕的图片会造成流量的浪费以及加载的缓慢，这显然有着不好的用户体验，针对这种情况，而提出了响应式图片的概念和解决方法

通过js或服务端解决：
通过js判断屏幕大小，在不同分辨率的情况下加载不同的屏幕
srcset配合sizes

<img class='image' src='img/480.png'
    srcset='img/480.png 470w, img/800.png 800w, img/1600.png 1600w'
    sizes='50vw'>

详细参考：响应式图片srcset全新释义

picture标签

<picture>
    <source media="min-width:36em"
            srcset="img/pic-s.jpg 768w"/>
    <source 
            srcset="img/pic.jpg 1800w"/>
    ![](img/pic.jpg)
</picture>

这是一个尚在开发中的功能，详细请查看MDN,针对该标签兼容问题可用该插件解决picturefill

svg矢量图

响应式网站的设计原则

内容流动：随着屏幕尺寸变小，内容将会占据更多的垂直空间，而下方的内容就会被接着往下推，这就是所谓的流动。
使用相对单位：画布大小可以是desktop、mobile或是它们之间的任何尺寸。像素密度也可以有所不同，所以我们需要灵活的、在各种屏幕上都可以使用的单位。
断点：不要根据某一特定手机种类进行断点设置，而是根据大体的屏幕分类像素分类进行设置。如：0-480为小屏幕 481-800为中屏幕等
最大值或最小值：有时候，如果内容占据了屏幕的整个宽度是很好的，比如在移动设备上。但是如果是在电视屏幕上，相同的内容，占据了你的屏幕整个的宽度，通常就意义不大了。这就是Min/Max值发挥作用的时候了。

本文目的旨在记录学习当中所遇到的重要知识点，所以难免疏漏或者错误，欢迎指正讨论