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,你就知道是为什么了,要是你从未了解过,也无需担心,继续阅读这篇博文,你就知道为什么了。

Retina Images

Retina相关的教程在W3cplus上也可以找到一些了,这些教程大部分都是根据国外介绍Retina优秀的博文所译,虽然有些地方译得并不恰当,但对于帮助初学者了解Retina是什么,我想还是有所帮助的。特意把Jeremy WorboysRetina Images推荐给大家。从名称上就知道,这个Retina Images就是为Retina技术而生,是的,在官网中详细介绍了如何让你的站点图像能在Retina屏幕设备下得到支持,让你的图像在Retina屏幕设备下显示的清晰细腻。提高用户的视觉效果。今天把Retina Images官网上的内容译成中文放在W3cplus上与大家分享。

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

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

使用css sprites来优化你的网站在Retina屏幕下显示

CSS Sprites技术在Web页面上的运用是相当的广泛,早在八年前就已开始流行,他不但让可以减少http的请求数量,还可以减少你的代码量,易于维护。但是今天并不是来说CSS Sprites如何使用,因为如何制作CSS Sprites图,怎么运用到Web页面中,做为前端人员来说并不陌生。这篇文章想和大家借助Maykel的《Using CSS Sprites to optimize your website for Retina Displays》文章来学习Retina下如何使用CSS Sprites图片,或者说使用CSS Sprites能给Retina屏幕设备下的Web页面带来什么好处?如果你对这个话题也感兴趣的话,不仿花几分钟时间看看,因为这篇 文章就是用了一个简单的实例,阐述了如何在Retina屏幕下使用CSS Sprites图片,希望对您有所帮助。

Web设计师如何制作Retina图像

最近一直在想法设法的了解和学习有关于Retina方面的知识,几天下来,稍有些许的了解,知道了他是一个什么东东,当我译完《走向视网膜(Retina)的Web时代》后,让我知道了前端有这么一个新概念的知识,也让我感觉到自己了解行内新知识太慢,不得不感到鸭梨山大,同时译完《移动Web——CSS为Retian屏幕替换图片》后,我知道了怎么在移动端(iPhone/iPod/IPad等苹果移动终端)上控制Retina图像。但问题也同时延伸出来了,做为一名\Web前端从业者来说,仅知道怎么使用还不行呀,如果需要适合于Retina设备的图像怎么处理呢?还好,在网上看到了Chris Spooner写的《How to Create Retina Graphics for your Web Designs》,这篇文章虽然介绍的简单,但对我们Web前端人员很实用,简单的告诉了我们要如何制作图片,同时还告诉我们如何处理Retina设备下所需的图片。有兴趣的同学可以花几分钟过一回。

移动Web——CSS为Retina屏幕替换图片

移动端的Web开发是一个热门的话题,由于移动端的普及,以后互联网上她将是会是主流,取代PC端的霸主之位。做为前端开发人员,很有必要的去了解并掌握移动Web的开发与制作。今天这篇教程主要是介绍Retina设备下的图片处理技术,正如《走向视网膜(Retina)的Web时代》一文所言,普通图片在Retina设备下显示将会变得模糊(图片在Retina设备下像素放大了两倍),所以为了能让用户在Retina设备(如iPhone 5, New iPad,Galaxy Nexus等设备)浏览的图片能清晰,满足用户的体验,Web前端人员需要学习并掌握如何处理这些问题,这对于Web前端人员来说是一个新的课题,也是一个新的挑战。今天跟着的《The Mobile Web: CSS Image Replacement for Retina Display Devices》一文学习了几种在移动端的Retina屏幕下处理图片的方法,觉得蛮好的,特意花了一个晚上时间将其转译为中文,希望对有着同样爱好与兴趣的同学有所帮助,如果有译的不对之处,烦请指正,或者大家可以阅读原文,你会有更深的体会(因为本人的EN是三脚毛功夫,莫怪(^_^))。

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

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

返回顶部