HTML5

svg正在越来越广泛的应用在前端领域，由于矢量图缩放对图像质量无损，越来越多的图标、图片都开始使用svg。但svg文件一旦多起来，就需要对这些资源进行集中管理。webpack的svg-loader只是简单的将svg文件替换成了文本内容，增加了bundle文件的体积，灵活性也不高，如果能将svg文件处理成类似于jpg/png图片一样，做成sprite就好了。而这正是svg-sprite-loader要做的事情。 viewBox 在svg文件中，可以创建若干个view，view包含一个名为viewBox的属性，viewBox允许我们定义一个矩形区域，通过四个参数 left, top, width和height，可以通过设置id来对view进行标示。 当定义view之后，在引入svg文件时，就可以指定显示某个view，如下所示 <img src="sprite.svg#svgView(viewBox(0, 0, 32, 32))" alt=""> .icon-clock { background: url(sprite.svg#icon-clock-view)…

CSS中有很多关于尺寸的单位，包括：px，pt，%，em，cm等，根据其性质可以分为两类：绝对尺寸单位和相对尺寸单位。 绝对尺寸 绝对尺寸就是物理世界的度量单位，CSS中的绝对度量单位见下表 CSS中的绝对尺寸单位 符号名称备注 in英寸1 in = 2.54cm cm厘米 mm毫米 pc派卡印刷行业使用的长度单位。1 pc = 1/6 in = 4.512 mm pt磅1pt = 1/72 in = 0.352 777 mm， 1 in = 72pt 使用绝对尺寸的好处在于我们可以直观的理解尺寸的大小，但是，现在的页面往往要求支持在多终端下浏览，为了保证在手机、平板等设备上显示友好，绝对尺寸显然无法实现这一点，因此，最好通过相对尺寸单位来进行大小设置。 #相对尺寸 相对尺寸并不是一个确切的固定值，而是与当前屏幕的尺寸有关，…