Retina

Sass Mixins——支持Retina的Icons Sprite

Sprites(国内称之为雪碧图),平常很多时候都是依赖于手工在制作软件中完成,或者依赖于第三方插件自动生成Sprites图。这样虽能实现雪碧图,但在来很多工作量。如果你开始使用Sass或者Compass,你可以发现他们有一个强大的功能,可能使用Sass的mixins自动生成雪碧图。特别是在Retina显屏的时代,使用Sass的mixins生成雪碧更让我们前端人员变得轻松。这篇的《Sass Mixins Icons Sprite with Retina Support》所译,在文章中详细介绍了如何使用Sass的Mixins自动生成普通显屏和Retina显屏的雪碧图。希望这篇文章对大家有所帮助。

使用CSS3的background-size优化苹果的Retina屏幕的图像显示

Sprites熟悉的人较多,在国内有有称之为精灵,也有人称之为雪碧,我个人更喜欢称之为Sprites图像。在一张图上集成了很多个图,然后通过background-position定位,达到背景图显示正确的效果,减少Http的请求个数,从而优化性能。而background-size来说,如果你没有接触过CSS3方面的相关知识,那可能会比较陌生,不知道如何使用,其实很简单,就是通过这个属性来改变背景图片的大小。很神奇吧。那么,为什么 这两个东东就跟Retina屏幕设备扯上了关系呢?要是你有了解过Retina,你就知道是为什么了,要是你从未了解过,也无需担心,继续阅读这篇博文,你就知道为什么了。

image-set实现Retina屏幕下图片显示

最近一直在学习Retina屏幕下图片的处理方法,从《走向视网膜(Retina)的Web时代》一文中知道了Retina这个新名词,同时知道了他是什么东东,同时也继续在探讨Retina方面的知识点,随后在《移动Web——CSS为Retian屏幕替换图片》和《使用css sprites来优化你的网站在Retina屏幕下显示》中学习了Retina屏幕下图片的设置方法,或者说技巧吧,接下来《Web设计师如何制作Retina图像》学习了Retina屏幕下的图片制作技巧。其实可以说,这几篇文章可以让我知道如何在Retina屏幕下处理图片的技巧和细节了。因为这几篇文章从概念到制作Retina屏蔽下的图片,以及Coding实现,可以说是一条龙了。这些都是自以为事,为什么呢?除了这些方法,其实还有更先进的方法,这也就是我接下来要说的事情了。

走向视网膜(Retina)的Web时代

Retina对我来说是一个全新的概念。初次接触还不知道是什么意,后来翻译后才知道“视网膜”,在互联网上海量搜索一翻,这是我们前端的一个新知识点——视网膜Web。的确是个NB的新事物,我一开始看简直不知道是什么东西,后来慢慢的看了一些专业术语,结合业务的高人写的博客,总算是对其有一点点的了解。同时把这几天看的东西做了一下学习笔记,希望对一些新接触 Retina的同学有许些的帮助。(因为自己对这一块知道的不多,有可能有写错的地方,希望这些地方不会误人子弟,罪过罪过),更希望有错的地方能得到同行朋友的指正。

返回顶部