全站webp化!

2017-04-17
WebP,是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。 GraphicsMagick GraphicsMagick号称图像处理领域的瑞士军刀。 短小精悍的代码却提供了一个鲁...

阅读更多

了解 em 和 rem 的使用

2017-04-16
设备像素比(device pixel ratio) 设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到: 设备像素比 = 物理像素 / 设备独立像素 在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的dpr。 而在CSS中,可以通过-webkit-device-pixel-ratio,-webkit...

阅读更多

移动端300ms延迟事件响应

2017-04-06
移动端涉及到的触摸操作比较复杂,所以在设计上,移动端浏览器会在 touchend 和 click 之间有300ms左右的延迟间隔来判断用户是单击还是双击屏幕,所以在移动端浏览器经常看到,我们可以双击屏幕来放大显示的范围,但是在开发中,我们要消除这些延迟,所以总结了一下几个方法 情景再现,运行下面代码,要在移动端预览,可以看出平均延迟在200ms左右 <!DOCTYPE html>...

阅读更多

移动端实现0.5px线条

2017-03-30
移动端写页面时候,由于手机屏幕小,为了让线条看起来更细腻,所以需要0.5px的线条,下面总结了两种常用的方法 利用transform属性 原理很简单,就是利用伪类元素绘制1px的线条,然后利用transform:scale(0.5)缩放一半就变成了0.5px <style type="text/css"> .line2 { position: relat...

阅读更多

web缓存原理

2016-07-20
web缓存在网站开发有很大的益处,可以提高网站的访问速度,减轻服务器的压力,减少带宽的占用。 浏览器缓存 浏览器都自带http缓存的实现,我们只需要提供正确的请求头,浏览器和服务器会根据请求来做对应的缓存策略。例如,百度对jquery静态文件的一个http请求如下 从上面看出,一个响应头的缓存策略控制包括&nbsp;cache-control&nbsp;etag expi...

阅读更多

利用img标签垂直居中元素

2016-05-22
今天发现一个用img标签垂直居中元素的方法,直接上代码 <style type="text/css"> .container { height: 500px; width: 500px; text - align: center; border: 1px solid#ddd; } .center-ele { display: inline; ...

阅读更多

最新发布
热门文章