资讯频道 → Web前端
阅读更多

3顶
2踩

Web前端

原创新闻 视网膜屏幕时代来临，赶快更新你的CSS吧

2013-02-16 10:51 by 见习编辑 tyygming 评论(3) 有7811人浏览
CSS 网页设计 界面设计 retina界面 iOS

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

苹果的拥有视网膜屏幕的MacBook Pro发行到现在已经过了很久了，但很多web开发者们还在抓着胸前的键盘，忽视进步，将自己推入一种黑暗的“像素恐惧症”的深渊。

像素就是未来，它会不断出现在iPad、MacBook、iPhone或Android手机上。大量照片会向你扑过来，图标会浸透你的灵魂，字体通过屏幕像波尔卡舞的舞者一样给你滴迷 魂药。

视网膜屏幕的MacBook Pro目前来说仍然算是奢侈品，但我们已经有了快一年的视网膜屏幕iPad，两年半的iPhone 4。高清晰度显示的广泛使用率已经5倍于“江南style”。然而，要让互联网完全采用适合视网膜屏的图片仍然是有困难的。创业公司们在完全无视视网膜屏 的情况下，苦心设计数月他们的新网站，当人们在视网膜显示屏下看到这个网站时，它就像一个乱七八糟的像素团儿。

这是一个实际的、未经修饰的截图：



看到了吗？像素无处不在。我甚至看不到网站了：所有我能看到的就是黄色像素，棕色像素，红色像素…

有解决办法：

这个解决办法很简单，但很少实现：提供高分辨率的设备。

有一些方式可以做到这一点。Apple.com可能在互联网上有两个站点，大多数转移到高分辨率的资源上了，但他们使用了一些janky JavaScript的技术先下载1x图像（正常的分辨率），派一个请求来测试2x图像(两倍大小)是否存在，如果存在就下载，并从带有2x图像的DOM 里交换1x图像。你的眼睛明显会感觉到像有白内障，因为你在适应模糊形象的一瞬间就转变为一些令人舒服清晰的图像。当然，视网膜设备会产生额外的开销：加载两种图片和一个额外的请求。

最简单的方法就是直接加载2x资源： 

<img src="/images/header-500px.png" width="250"/>


现代浏览器对页面资源按比例缩小。这对图像来说是很不错的，比如logo——你想要像素以完美的比例展现较小的尺寸，那么你可以派一个设计师去参与计算所需 要的不同尺度的比例。对于低精度的屏幕你承担额外的带宽开销，但是那能用CSS选择器解决，根据像素密度显示资源。你甚至可以用SCSS或其他前端框架自 动实现。除此之外，探索像SVG和webfonts的矢量技术。创建您自己的图标设置或使用其他工具集，他们能够发挥巨大的作用，使得按钮和导航控件真正 的在高DPI屏幕上流行。你知道这样做需要更长时间吗？或许你认为这很容易，恐怕你只是拿最喜欢的1992年16x16图标来吹嘘成128x128的，这 或许就是你在过去的几十年里所做的吧。高分辨率显示还没有被广泛的使用，但到2013年底，肯定会开始改变。争取在曲线上升开始前行动吧.

还记得AJAX、DHTML以及CSS发布之前的日子吗？我们有5年时光，倍感光荣地使用<table>标签及绝佳的1X1.gif图像，他们确实为我们服务的很好。但接下来的事情就像禅宗花园爆炸了一样，从根本上改变了我们对互联网的整体看法。

为了保护你的资产，赶紧去更新你的CSS吧！

Via gbtags
来自: www.gbin1.com
3
顶
2
踩
评论 共 3 条 请登录后发表评论
3 楼 cys0429831 2013-02-17 17:17
hellostory 写道
引用
你最好抓紧时间提供一些适合视网膜屏幕的图片，否则你的公司很快就会垮掉，没有人会使用你的产品，你的孩子将会辍学甚至吸毒。


这作者头脑有坑……


确实有坑 还不小的坑
2 楼 hellostory 2013-02-17 17:02
引用
你最好抓紧时间提供一些适合视网膜屏幕的图片，否则你的公司很快就会垮掉，没有人会使用你的产品，你的孩子将会辍学甚至吸毒。


这作者头脑有坑……

1 楼 tiankong杜 2013-02-17 14:34

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • java大数据培训，如何选择适合自己的培训机构？

    可以视情况直接跳过java阶段的学习，那么学习时间就可以少一个多月时间，当然前提是基础足够扎实，如果你只是自学了一点java的知识，那么最好还是要从0开始学大数据，选择一家靠谱的Java培训机构。 　 　如何挑选...

  • net开源开发web框架_自定义我的用于Web开发的开源PHP框架

    net开源开发web框架 PHP Codeigniter是一个开放源代码框架，为业务应用程序提供易于使用PHP编程语言和强大的编码工具。 它还提供商业智能，服务器监视，开发和应用程序集成功能。 这是一个相对安静的项目，您...

  • 一篇1.5万字关于IT培训机构的个人看法分享

    在掘金看到一篇发布与2017年【关于IT培训机构的个人看法】的文章，蛮有感触的 正文： 1.前言 缘分与巧合，最近接触比较多的培训机构出来的人，以及看过关于培训机构的文章和问答。虽然没在培训机构上过课，但是接触...

  • 潜入培训机构，顺出来一份价值 2.2W 的 Python 人工智能大纲

    ” “简单，高效，易上手，就业薪资还不错~” 终于，你认识到了自己技术菜，而不是机构培训技能菜。 你还没就业，就从人工智能领域转型到了 Python Web 开发领域。 章节目标中，手把手搭建大型网站页面，重点是后面...

  • 自定义用于Web开发的开源PHP框架Codeigniter

    Codeigniter 是一个 PHP 框架，可以使公司进行开发具有灵活...我在新加坡的一家在线学习服务提供商处使用 Codeigniter。我们提供的服务并不算常见，没有可以作为模板的默认功能集或现有后台管理系统，所以我需要一个能

  • 软件测试工程师面试题答案分类详解-一家老牌培训机构内部绝密文件！

    本文是笔者就职于某知名培训机构时内部绝密文件！绝密文件！绝密文件！ 一：前言：浅谈软件测试工程面试 2020年是以往10年中最差的一年，是往后10年终最好的一年，这句话不知道是谁讲的，好像是罗胖的跨年演讲，...

  • 上海python培训比较好的机构-上海Python培训机构推荐

    原标题：上海Python培训机构推荐...所以才比C++，Java等传统语言更容易上手和易学，在这里上海Python培训机构推荐给大家。 小编认为应该被推荐的机构必须符合以下几个条件：一，师资力量优：师资力量如何，直接...

  • 我们要做广州传智播客PHP培训机构的高徒

    我们要做广州传智播客PHP培训机构的高徒  海内存知己，天涯若比邻，当你选择，离开你熟悉的环境；当你选择，放弃曾经的工作；当你选择踏入这个教室，你是否担心你会孤独一个人前行？面对未知的未来，你是否担心...

  • 天津Java培训机构，培训班出来的好就业吗？

    不可能找到一家不使用 Java 的大公司。Java 人员可以从事数据保护和安全、数据分析、网站开发、优化数据算法、编写代码和构建 Android 应用程序等方面。 不管你是培训班毕业的学生，还是学校出来的学生，只要你有...

  • 2021Java面经：最便宜java培训机构

    培训机构是比较有优势的，前提是你要选择一家优质的教育机构，有人又有疑问了，什么培训机构才值得选择呢？这个在这里就不多阐述了 目前培训机构分为线上在线教育以及线下教育模式，两者各有各的优劣势，相比较而言...

  • python培训比较好的机构-学Python去哪家培训机构比较好？

    原标题：学Python去哪家培训机构比较好？参加Python培训班的同学越来越多，因为参加培训班好处多多，一是可以大大的节约学习时间;二是有技术老师随时指导快速学习，掌握更多的技术;三是培训机构推荐工作，能够完美的...

  • 知识点1--认识SSM框架并准备项目

    SSM框架，分为Spring、Spring-MVC、Mybatis，是一个比较老的Web开发框架，不过现在很多地方任然在用，因为它虽然没有当下流行框架使用方便，但是请记住做开发必须要知道的一个道理，所有封装的框架使用越方便，所能...

  • 培训机构混半年，小公司出来张嘴就要30k！

    前2.5个月的时间学习html、js、javaSE，之后就开始接触jsp、spring、mybatis、struts2、hibernate等等一些web框架，开始做各种实战的项目。 培训完之后，就自己开始找工作，很幸运第一次找工作去面试就当场通过了，...

  • 学习WEB前端是报培训好还是网上买课好呢

    先说说线下培训班吧，目前web前端培训这块没有任何一家的口碑是好的，由于培训机构现在太多，北京这样的城市至少有上万家web前端培训机构，有的线下培训机构可能只有两个老师，只要能招到学生，什么手段都用，他们最...

  • 2022年末最新最全Java学习路线，结合工作经验和培训机构整理

    Java从1995年诞生到如今，体系成熟，运行稳定，成为大型后端系统的首选语言，也是各培训机构宠儿，笔者结合近几年行业的发展和变化以及个人经历总结一下适合于现在的Java学习路线。 目录 前言 JavaSE JavaWeb MySQL...

  • 所谓“现代Web开发”，都是些什么妖魔鬼怪？

    以下内容来自公众号逆锋起笔，关注每日干货及时送达编译 | 核子可乐、Tina “2022 年已经到来，我们是时候反思 Web 开发中的种种过时软件、炒作歪曲和荒谬趋势了。把握这一年，...

  • 学习Web前端开发，你可选择的高薪发展方向

    像爱创课堂，是一家专门做前端教育的培训机构。 是由前百度前端架构师，张容铭老师亲自带队授课全程面授；授课以实战课程为主，张老师前端技术过人，每年有很多学员过 来学习，也教会无数名高级前端工程师，在各企业...

  • 云存储云计算选择开源还是商业版

    现在市场上有很多云计算架构可供选择，既有成熟的商业版本，也有基于开源的技术。 每个公司在面临存储运算瓶颈时，都会面临一番挣扎，本篇文章我们来调研梳理开源与商业版本的选择对比。 选择商用云平台还是选择...

  • 互联网软件技术培训，靠谱吗？

    大学那会儿，一专业老师是西电毕业，主修通信电子，毕业从事军工研发，后来进入高校教书育人，传道授业解惑时感概：毕业时也满腔热血，以为可以改变家庭和自己的命运，如今年...嗐，科班还是培训，不都是“混”口饭吃？

  • Java 培训四个月能学会找到工作吗？

    这个问题不能全部怪到培训班上面，培训班能办起来肯定是有自己的教学流程，人家该讲的课肯定给你讲完，学不学就是我们自己的问题了。 我当时学习的时候班里一共不到30个人，满打满算可以每节课都把作业交上的学员...

Global site tag (gtag.js) - Google Analytics