媒体查询以及flexbox，响应式图片

　　媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width.height和color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适应不同的设备。

　　 媒体查询的使用方式：在css文件输入@media screen。在Link标签中使用媒体查询。<link rel="style sheet" type="text/css" media="screen" href="screenstyles.css">。组合媒体查询：可以将多个媒体查询串在一起。

　　使用Css中的@import会增加HTTP请求（进而影响加载速度），因此请慎用。

　　可以使用@import导入css时使用媒体查询，有条件地向当前样式表中加载其他样式表。

　　在针对所有设备的媒体查询中，可以使用简写语法，即省略关键字all(以及紧随其后的and）。换句话说，如果不指定关键字，则关键字就是all。

　　从浏览器得角度看，css属于阻塞渲染的资源。换句话说，浏览器需要下载并解析链接的css文件，然后在渲染页面。不过现在浏览器都很聪明，知道哪些样式表必须立即分析，而哪些样式可以等到页面初始渲染结束再处理。“【阻塞渲染】仅是指该资源是否会暂停浏览器得首次页面渲染。无论CSS是否阻塞渲染，CSS资源都会被下载，只是说非阻塞性资源的优先级比较低而已。”

　　分隔媒体查询的利弊：多一个文件就要多一次HTTP请求，在某些条件下，HTTP请求多了会明显影响页面加载速度。不过相对这个方面得性能提升。首先要确认的是：所有图片都压缩过了；所有脚本都拼接和缩短了；所有资源都采用了gzip压缩；所有静态内容都缓存到了CDN；所有多余得CSS规则都被清除了。

　　最开始的时候大家使用百分比形式定义。弹性布局。几年后，我们使用固定宽度。现在我们又开始使用响应式设计。css15年初了一个新的布局模块叫‘弹性盒子（flexbox）’，除了用于实现弹性布局，flexbox还可以用来居中内容，改变标记中的源码顺序，创建令人惊艳的页面布局。响应式设计还有一个重要组成部分：响应式图片。

　　有时候需要将固定像素大小转换为比例大小。这个转换有一个简单地公式，Ethan Marcotte给出：结果 = 目标/上下文。

　　行内块、浮动、表格的缺点：行内块布局的最大问题，就是它会在HTML元素间渲染空白。另外说明一下，在行内块中垂直居中也不容易。浮动有两个问题：一：如果给浮动元素的宽度设定百分比，那么最终计算值在不同平台上的结果不一样（有些浏览器向上取整，有的则是向下。）二：通常都要清除浮动，才能避免父盒子/元素折叠。虽然很容易做，但是每次清除都相当于在提醒我们：浮动并非一个地道的布局机制。表格与表元：需要在每个项目外面包一层，也不能把设置为display:table-cell项目包到多行上。

　　flexbox概述：方便地垂直居中内容。改变元素的视觉次序。在盒子里自动插入空白以及对齐元素，自动对齐元素间的空白。autoprefixer针对各种情况提供了很多版本。可以找一个自动加前缀的方法。

　　完美垂直居中文本：display:flex;align-items:center;justify-content:center;display:flex;这是flexbox得根本所在。这里就是当前元素设置为一个Flexbox。align-items:这是要在Flexbox中沿交叉轴对齐项目。justify-content:在这里设置内容沿主轴居中。在Flexbox中，可以把它想象成word软件中的一个按钮。

　　偏移：没有浮动，没有行内块，也没有表元。在包含元素上设置display:flexbox;后，，其子元素就会变成弹性项，从而在弹性布局模型下布局。这里的魔法属性是margin-left:auto，它让最后一项用上该侧所有可用的外边距。如果让所有项反序排列？简单，给包含元素的CSS加一行flex-direction:row-reverse。在包含元素中使用flex-direction:column;再把自动边距属性删掉：flex-direction:column;align-items:center;padding:0 1rem;

　　Flexbox与有与inline-block和inline-table对应的inline-flex辩题。得益于它的居中能力，通过行内伸缩模型可以轻松实现一些效果。