本文介绍的方案来源于一次 H5 活动的开发实践。 H5 DEMO 参考:bir2017 拿到设计稿后,如何进行布局还原? 如果只需要做非精确的响应式设计,那么使用媒体查询来实现就 OK 了。如果需要精确还原设计稿,则一般…
puppeteer 安装时跳过 chrome 安装的方法
puppeteer 安装时跳过 chrome 安装的方法 puppeteer 安装时跳过下载 chrome 在项目目录里安装 puppeteer 时,都会下载 Chromium。这个慢不说,也会造成重复下载、耗时过长等问…
html 标签 iframe 基础与应用实践
在中后台管理系统中,由于业务功能模块的复杂性,使用 iframe 是不可避免的。当需要嵌入单独实现的或由另外一个系统提供的页面功能模块时,你只能选择 iframe。 本文尝试对 iframe 应用实践中常见的问题进行简要…
fis3 工程化工具应用实践经验
1. fis3 简介 fis3 是狼厂出产的工程化构建工具,在其厂内得到广泛推广应用,在国内也火了很长一段时间。而在 webpack 和 rollup 大红大紫的当下,fis3 似乎在日新月异的前端圈里渐渐地淡出大众的视…
前端 javascript 实现文件下载
在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 href 属性上的链接。示例: 1. 前端 js 下载实现与示例 通过 javascript 动态创建一个…
网站渐进式增强体验(PWA)改造:Service Worker 应用详解
掌握 Service Worker 或许这一篇就够了。关于 PWA(Progressive Web Apps),你需要了解的 Service Worker 内容这里都有。
Animated PNG:使用 PNG 格式的动画图片
Animated PNG 可以解决高清动画图片的问题。PNG 动画图片支持 24 位(1600W 色),并且支持 alpha 透明度。另外,GIF 动画每秒最多限制为 10 帧,PNG 动画则无此限制,因此可以得到更为细…
HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结
年前放假的最后一天,我们上线了「My Flyme 独家记忆」 H5 活动宣传页。 因种种原因,直到放假前几天,才突然要求我们参与并开始项目的前端部分。此时大概的情况是:所有数据已计算完毕;后端接口已完成待联调;交互视觉只…