本文介绍的方案来源于一次 H5 活动的开发实践。 H5 DEMO 参考：bir2017 拿到设计稿后，如何进行布局还原？ 如果只需要做非精确的响应式设计，那么使用媒体查询来实现就 OK 了。如果需要精确还原设计稿，则一般通过缩放来实现，常见的缩放方案有基于 viewport 和基于 rem 的布局适配方法。 1 viewport 缩放方案 在移动端，可以通过 viewport 缩放页面大小比率达到

puppeteer 安装设置国内代理下载 chrome 的方法 通过执行命令 npm install puppeteer，可以快速简单的将 puppeteer 添加到项目依赖中。 但是期间会下载 Chromium，如果是在国内大概率会被卡主很长时间，甚至是失败。 设置如下环境变量（支持puppeteer新旧版本），可以让它通过访问在国内的镜像文件达到快速下载的目的： export PUPPETEE

在中后台管理系统中，由于业务功能模块的复杂性，使用 iframe 是不可避免的。当需要嵌入单独实现的或由另外一个系统提供的页面功能模块时，你只能选择 iframe。 本文尝试对 iframe 应用实践中常见的问题进行简要整理。 1 HTML <iframe> 标签 iframe 用于创建页内框架，以在当前页面中嵌入另外一个页面。所有浏览器都支持 &lt;iframe&g

1. fis3 简介 fis3 是狼厂出产的工程化构建工具，在其厂内得到广泛推广应用，在国内也火了很长一段时间。而在 webpack 和 rollup 大红大紫的当下，fis3 似乎在日新月异的前端圈里渐渐地淡出大众的视野。 暂不说孰优孰劣，好用够用就是最好的。fis3 相对已比较成熟稳定，又太长时间没有新东西拿出来，在 tree shaking 这些技术面前显得有些落后。当前应该仍有不少的团队在

在 html5 中，a 标签新增了 download 属性，包含该属性的链接被点击时，浏览器会以下载文件方式下载 href 属性上的链接。示例： <a href=\"https://www.baidu.com\" download=\"baidu.html\">下载</a> 1. 前端 js 下载实现与示例 通过 javascript 动态创建一个包含 download 属性的 a

掌握 Service Worker 或许这一篇就够了。关于 PWA(Progressive Web Apps)，你需要了解的 Service Worker 内容这里都有。

Animated PNG 可以解决高清动画图片的问题。PNG 动画图片支持 24 位（1600W 色），并且支持 alpha 透明度。另外，GIF 动画每秒最多限制为 10 帧，PNG 动画则无此限制，因此可以得到更为细腻的动画效果。

年前放假的最后一天，我们上线了「My Flyme 独家记忆」 H5 活动宣传页。 因种种原因，直到放假前几天，才突然要求我们参与并开始项目的前端部分。此时大概的情况是：所有数据已计算完毕；后端接口已完成待联调；交互视觉只出了不到四分之一(一共二十多个页面)；我们平时以中后台项目为主，这种活动页从未涉及。我们真正介入时距离上线时间点只有四天，在这种背景下，已经谈不上探讨什么样的技术选型最佳，只能是越

简单来说，yarn 是一个与 npm 功能相同的工具，用于前端项目的依赖管理。在使用 npm 的项目中，使用 npm 命令的地方都可以使用 yran 来代替。为什么要使用 yarn 替代 npm 呢？请阅读本文详情寻找相关答案。

相同或相似功能应尽量书写可复用代码实现，函数化、模块化、参数化是实现代码可复用的关键技巧，也是高质量编码的基本要求。简单的复用实现可以是一个函数，更复杂完善一些就成了通用性组件、库或框架。