PWA的概念以及用途

PWA英文为Progressive Web Apps,即渐进式Web应用,是提升Web Apps体验的一种新方法。PWA简介PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性能和体验三个方面都有很大提升,PWA 本质上是 Web App,借助一些新技术也具备了 Nativ...
2019-02-22 read more

纯CSS实现视差效果

通常而言,滚动视差在前端需要辅助 Javascript 才能实现。当然,其实 CSS 在实现滚动视差效果方面,也有着不俗的能力。下面就让我们来见识一二:…何为视差滚动视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势...
2019-02-18 read more

CSS实现导航栏下划线跟随效果

CSS实现导航栏下划线跟随效果要怎么实现呢?怎么才能不使用js实现并让效果很自然…一般的导航下划线的实现<style>ul li{ display: inline; padding: 5px;}ul li:hover{ border-bottom: 2px solid #000;}&...
2019-02-18 read more

CSS实现顶部滚动进度条

如何实现纯CSS的滚动进度条效果,一般我们都是使用js,但是这篇通过使用线性渐变来实现…问题先行,如何使用 CSS 实现下述滚动条效果?就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。OK,...
2019-02-18 read more

Blob、FileReader全面解析

历史上,JavaScript无法处理二进制数据。如果一定要处理的话,只能使用charCodeAt()方法,一个个字节地从文字编码转成二进制数据,还有一种办法是将二进制数据转成Base64编码,再进行处理。这两种方法不仅速度慢,而且容易出错。ECMAScript 5引入了Blob对象,允许直接操作二进制数据。…Bl...
2019-01-25 read more

二进制数与位运算符

位运算符是基于二级制数进行操作的,即表示数字的 32 个数位,它由0和1组成…二进制数表示整数18ECMAScript整数有两种类型,即有符号整数(允许用正数和负数)和无符号整数(只允许用正数)。在ECMAScript中,所有整数字面量默认都是有符号整数。有符号整数使用31位(第0到第30位)表示整数的数值,用第...
2019-01-03 read more

-webkit-line-clamp设置文字行数

-webkit-line-clamp不在CSS规范中,因此使用的时候需要慎重,目前主要用在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面…属性-webkit-line-clamp-webkit-line-clamp的作用是限制一个块级元素显示文本的行数。为了实现这个效果,他需要配合其他属性...
2018-12-12 read more

IE浏览器兼容问题处理

IE浏览器兼容是一些老项目常见的问题,最近我就遇到一些IE浏览器兼容的问题,下面把它整理出来方便记忆…判断IE浏览器版本1、IE浏览器判断规则 项目 案例 说明 ! [if !IE] 非运算符,非IE浏览器 ...
2018-12-12 read more

移动端页面真机调试的几种方法

使用谷歌等浏览器虽然说能够模拟手机端页面,但是一些特殊的bug,只有在特定的手机上才能展现出来,这个时候真机调试就很必要了…ISO真机调试的方法1、使用Mac电脑和iphone手机调试1)使用数据线将mac电脑和iphone手机相连2)iPhone开启Web检查器(设置 -> Safari -> 高级...
2018-12-10 read more

静态资源发布到七牛CDN上

通过把静态资源放在CDN上,减少对服务器的请求,从而实现优化提升性能的目的…项目背景项目采用webpack编译打包,站点在nigix上,但是因为受到nginx服务器性能以及磁盘IO的限制,可能在存在性能问题。因此,将webpack编译后的文件放在七牛CDN上,而nginx服务器上只放index.html文件(引用...
2018-10-31 read more