Oliver Liu

说缓动函数之前呢，先看下一个饿了么的css添加购物车的效果图，这是很多年前我使用纯CSS的bezier函数实现的， 本章主要探索贝塞尔曲线的使用和原理，下图项目的仓库在这里. 用CSS实现这样一个动画，在没有贝塞尔的帮助几乎是不可能实现的，而贝塞尔曲线很少有人关注可以配合CSS实现很多 炫酷的效果，实际上在一些细腻的, 符合真实物理反馈的交互动画上，可以配合选择出不同的物理效果，除了上面的购物车动画效果外，像下面这个滑动的按钮也可以用CSS实现。 <img sr ... Read more

I was used the native char to represent the emoji in browser, but today I found a problem that it does not be supported by some computers, most cases in Win7, XP. So a question emerge on my mind, why it doesn't show? We knew The charset is preserved in the disk by our system, and charset is a set that includes many chars, which one is mapping by a glyph, it is very important for wherever ... Read more

dpr 是 devicePixelRatio(设备像素比) 的简写,此属性位于全局(window)当中(可配置，可枚举)，它表示1个css像素比多少个物理像素(设备像素)。 比如，我们使用css设置一个50\50像素的正方形。在dpr为1的设备中，它的真实物理像素分辨率为50\50，但是在dpr为2的设备当中 却是100*100。这是用户代理(浏览器)根据ppi为基准的提供的像素比。以上面的dpr为2的例子当中，它就表示 1 css pixel = 2 device pixel。 > 它的出现正是在物理像素与css像素两者之间为开发者提供了像素比例。 viewport这个html元标签，在我们设置device-width时，浏览器就会根据此比例值，去进行视口级的缩小。 它出现的意义? web发展快速，如今伴随着HTML5技术，如微信端，hyb ... Read more

像素是位图或光栅图像组成的最小单元，从某些程度上说，它不是你看到的一个小方块或广为流传的一个”点”，当然你也可以这样理解，但只能会让自己的元知识越来越糟，所以有必要花一点时间更深入的了解一下。 可以脑补一下它的形状，现在你可能想到的是色彩缤纷的小方块？从现在开始，我们需要改变一下对它的认知，把它看作是一串数列，对于程序员们来讲，比特(Bit)这个术语应该更贴切，它表示图像中的最小单位，并保存在显存当中。 它不一定是方形(一般256色或更少的色位都是方形)，大多数的显示器的解析度，可以通过计算机系统来调节，比如我们设置成 1.25 : 1 , 每像素的宽度是高度的1.25倍，这时，它可不是一个方形了。 一个像素所能表达的色彩深度取决于比特每像素(BPP),这个最大数可以通过2的色彩深度次幂来计算，比如8bit能表示256种颜色:2^8 = 256，16bit: ... Read more

Retina屏幕由摩托罗拉公司研发，随着iphone4的引入这个技术被熟知，这个词也成为苹果屏幕的专属代名词，简单的说它是指多个像素压缩在一块屏幕上， 所以清晰与细腻程度比以前更高。在某种程度上，它表示用肉眼分辨不出像素颗粒感的屏幕,但是这一点可不是这么判断的. > 是否为 Retina 屏幕，不仅仅决定于 ppi（分辨率，或者说像素间距h；1英寸/像素间距h英寸＝ppi），还要看使用设备时与人眼的距离（d） 几张图轻松理解概念: <img src="https://github.com/TongDaDa/mobile-knowledge/blob/master/img ... Read more