基于媒体查询和rem的响应式布局实践
媒体查询 @media
我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验，CSS 给我们提供了一个强大的条件判断语法，可以根据设备的宽度来设置不同的样式，从而实现不同的设备应用不同的布局。
下图展示了利用 @media 实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。
我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验，CSS 给我们提供了一个强大的条件判断语法，可以根据设备的宽度来设置不同的样式，从而实现不同的设备应用不同的布局。
下图展示了利用 @media 实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。
本文将会介绍如何将自己写的组件库打包成第三方库，发布到 npm 上，同时支持在原生 js / React/ Vue 下使用。Webpack4 的升级指南可以参考下 Webpack4.0 升级配置，本文不做赘述。
webpack 彪版本号的速度真是飞快，4.0 发布没多久上去看的时候才 4.1.*，现在已经刷到 4.8.1 了，给人一种“我版本号很高了，可以安心升级了”的感觉，然而坑依然很多…尤其是 API 文档，到处可见 3.0 的陈旧信息。Code Splitting 章节点进去依然在讲 CommonsChunkPlugin ，CommonsChunkPlugin 点进去提示去看 SplitChunksPlugin，看文档的时候经常会迷失自我，心累…好了，吐槽完毕，下面是正文。需要直接复制粘贴的同学直接拉到最后~
CSS 中的每个元素都被表示为一个矩形的盒子，每个盒子有四个边：content edge, padding edge, border edge, and margin edge。
box-sizing： content-box(默认)，border-box ，padding-box(deprecated)。
content-box 下盒子实际宽度不等于 width，不包括 padding 和 border 部分，布局计算不方便。border-box 下盒子实际宽度与 width 相等。
DTD（文档类型定义）是一组机器可读的规则，他定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。而 DOCTYPE 是用来描述使用哪个 DTD，保证网页以标准模式渲染，一个不含任何 DOCTYPE 的网页将会以 怪异(quirks) 模式渲染。HTML5 之前的 HTML 基于 SGML(Standard Generalized Markup Language, 标准通用标记语言)标准，需要 DTD 来保证在标准模式下渲染。HTML5 只需要 DOCTYPE 就可以保证在标准模式下渲染。