步骤进度条的使用场景很多，比如说购物流程 、订单流程、面试流程等都要用到它。网上常见的做法是使用CSS图片精灵，该做法的优点是兼容性强，但缺点也很明显：难以自适应设备，而且会加载额外的 图片资源。有没有更好一点的办法呢？下面实例将使用纯CSS来制作面试步骤进度条。
标签： 自适应
分类
升级WordPress
随着近年来推特和微博的流行，传统博客被人慢慢遗忘。想当年Web 2.0的年代，博客是多么的火，现在像我这样还写博客的人是越来越少了。让人感慨“三十年河东，三十年河西”。时间的原因，我的博客现在也不怎么更新了，不知道我还能坚持多久，我的目标是写十年。等到2016年的夏天，让它寿终正寝。
H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
最近做一个手机Web应用需要在各种平台的手机的不同分辨率下加载相应的图片。因为对图片要求较高，缩放会让图片变形模糊。最初想到的是用Javascript来获取手机屏幕大小，然后动态加载相应的CSS文件。这种办法是可行的，但不是最好的。最佳方案是使用今天将谈到的Media Query。
有时，开发人员希望对不同的平台设备和设备配置（如不同的DPI）使用不同的样式，我们可以在样式表中使用@media规则做到这一点。
@media规则是 CSS 规范的一部分；Flex 扩展了此规则，将额外的属性application-dpi和os-platform包括进来。通过这些属性，可以根据应用程序DPI和运行应用程序的平台来选择性地应用样式。