展开

关键词

Retina科学原理

第三代 iPad(New iPad)发布,不出意料的配置了 2048×1536 分辨率幕。发布会现场,Phil Schiller 仍称之为 Retina(视网膜)。 然而,联想到 iPhone44S 配置的 326ppi 分辨率的 Retina 幕,新 iPad 的幕究竟是不是“Retina ”引发了一些争议。?那 Retina 幕究竟是如何定义的? 为何分辨率 264ppi 的新 iPad 幕也被称为 Retina 。接下来,我们做一个较深入的了解。乔布斯为何提出300ppi? 有些朋友把“分辨率 300ppi”做为了判定 Retina 的标准,而 300ppi 与 Retina 的联系,始于 WSDC2010、iPhone4 的发布,当时乔布斯说“当手持设备距人眼 10- 但之后我们都记住了300ppi,部分朋友断章取义就把300ppi当作Retina的标准了。?

53530

retina中实现1px border效果

街景wap官网中有在视网膜幕中实现1px border的需求. 首先,来看下面视觉给的输出图中的border: ?从上面的视觉图可以看到,border是一根非常细的线。 这篇文章将说明如何使用border-image实现在视网膜中1px的border效果。 注:因为硬件条件的限制,设备像素比(devicePixelRatio)为1的非视网膜手机无法达到这样的效果 首先准备一张符合你要求的border-image:? 通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 但是我们发现这样的方法在非视网膜上会出现border显示不出来的现象,于是使用Media Query做了一些兼容,样式设置如下:.border-image-1px { border-bottom: 1px

54370
  • 广告
    关闭

    云产品限时秒杀

    云服务器1核2G首年38元,还有多款热门云产品满足您的上云需求

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    retina中实现1px border效果

    本文作者:IMWeb link 原文出处:IMWeb社区 未经同意,禁止转载 街景wap官网中有在视网膜幕中实现1px border的需求. 首先,来看下面视觉给的输出图中的border: ? 这篇文章将说明如何使用border-image实现在视网膜中1px的border效果。 注:因为硬件条件的限制,设备像素比(devicePixelRatio)为1的非视网膜手机无法达到这样的效果 首先准备一张符合你要求的border-image:? 通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 但是我们发现这样的方法在非视网膜上会出现border显示不出来的现象,于是使用Media Query做了一些兼容,样式设置如下:.border-image-1px { border-bottom: 1px

    20420

    前端不止:Retina幕下两倍图

    直到,苹果Retina幕的出现,原来小幕也可以拥有大分辨率。 以Retina幕为例,它并不是像普通显示器那样通过增大尺寸来增加分辨率,而是靠提升幕单位面积内的像素数量,即像素密度来提升分辨率,这样就有了高像素密度幕。 苹果将“高像素密度幕”的概念营销出一个专业的术语“Retina”,将其称为双密度显示,声称人类的肉眼将无法区分单个像素。当一个显示像素密度超过300ppi时,人眼就无法区分出单独的像素。 retinajs库----是不是适配Retina幕所有的图片都需要切换呢? 不是,一般情况下,不需要针对网站上的所有图片都提供两个版本(非Retina幕和Retina幕),大部分图片缩放并不会太多的影响用户的体验。

    84850

    retina 中实现1 px border 效果

    作者:link街景 wap 官网中有在视网膜幕中实现1px border 的需求。首先,来看下面视觉给的输出图中的 border:从上面的视觉图可以看到,border 是一根非常细的线。 这篇文章将说明如何使用 border-image 实现在视网膜中1px 的 border 效果。 注:因为硬件条件的限制,设备像素比(devicePixelRatio)为1的非视网膜手机无法达到这样的效果首先准备一张符合你要求的 border-image:通常手机端的页面设计稿都是放大一倍的,如: 为适应 iphone retina,设计稿会设计成640×960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 但是我们发现这样的方法在非视网膜上会出现border显示不出来的现象,于是使用Media Query做了一些兼容,样式设置如下:.border-image-1px { border-bottom: 1px

    59600

    HTML5中meta属性的使用详解

    iPhone 和 iTouch,默认 57x57 像素,必须有iPad,72x72 像素,可以没有,但推荐有Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 Retina iPad,144x144 像素,可以没有,推荐大家使用title最好限制在六个中文长度内,超长的内容会被隐藏,添加到主后的标题(iOS 6 新增)7、iOS 启动画面iPad 的启动画面是不包括状态栏区域的 iPad 竖 768 x 1004(标准分辨率)iPad 竖 1536x2008(Retina)iPad 横 1024x748(标准分辨率)iPad 横 2048x1496(Retina) iPhone iPhoneiPod Touch 竖 320x480 (标准分辨率)iPhoneiPod Touch 竖 640x960 (Retina)iPhone 5iPod Touch 5 竖 640x1136 (Retina) 当用户点击主图标打开 WebApp 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好8、Windows 8 Windows 8 磁贴颜色Windows

    49131

    解决canvas在高清中绘制模糊的问题

    一、问题分析 使用 canvas 绘制图片或者是文字在 Retina 中会非常模糊。如图: 因为 canvas 不是矢量图,而是像图片一样是位图模式的。 也就是说二倍,浏览器就会以 2 个像素点的宽度来渲染一个像素,该 canvas 在 Retina 幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊。 因此,要做 Retina 适配,关键是知道当前幕的设备像素比,然后将 canvas 放大到该设备像素比来绘制,然后将 canvas 压缩到一倍来展示。 举例来说,假设 devicePixelRatio 的值为 2 ,一张 100×100 像素大小的图片,在 Retina 幕下,会用 2 个像素点的宽度去渲染图片的 1 个像素点,因此该图片在 Retina 那么在3倍幕下就是: 因此,要使 canvas 适配高倍,就是要将 canvas 放大到设备像素比来绘制,最后将 canvas 压缩成一倍的物理大小来展示。

    1.4K10

    【Canvas】311- 解决 canvas 在高清中绘制模糊的问题

    点击上方“前端自习课”关注,学习起来~一、问题分析使用 canvas 绘制图片或者是文字在 Retina 中会非常模糊。如图:因为 canvas 不是矢量图,而是像图片一样是位图模式的。 也就是说二倍,浏览器就会以 2 个像素点的宽度来渲染一个像素,该 canvas 在 Retina 幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊。 因此,要做 Retina 适配,关键是知道当前幕的设备像素比,然后将 canvas 放大到该设备像素比来绘制,然后将 canvas 压缩到一倍来展示。 举例来说,假设 devicePixelRatio 的值为 2 ,一张 100×100 像素大小的图片,在 Retina 幕下,会用 2 个像素点的宽度去渲染图片的 1 个像素点,因此该图片在 Retina 那么在3倍幕下就是: 因此,要使 canvas 适配高倍,就是要将 canvas 放大到设备像素比来绘制,最后将 canvas 压缩成一倍的物理大小来展示。

    27020

    基础篇-app上传小准备及上架后搜索不显示

    HD 5.8 用于iPhone6+、7+、8+ 的1242x2208                也就是Retina HD 5.5 用于iPhone6、7、8 的750x1334,                       也就是Retina HD 4.7 用于4寸(iPhone55s)的640x1136,            也就是Retina 4 用于3.5寸(iPhone44s)的640x960,                   也就是2x retina 4是指4寸,即640*1136。 iphone 中非retain 的像素是 320*480 也就是1x ,retain 的像素是非retain的2倍,所以我们用 @2x 来表示图片是在retain中来使用。 4.7的iphone6 也是使用@2x的 ,5.5的 iphone6 plus 它使用的是@3x 的图片像素Portrait 是竖Landscape是横?

    43220

    买苹果设备需要注意哪些坑

    1、Retina 还是非 Retina毫无疑问,一定是选 Retina(高清视网膜幕)。Retina 有着优秀的文字图片浏览体验,这是多年以来 Mac 和 Windows 的显著区别之一。 凡是用过 Retina 的,就再也没有回去过。 如今大部分 Mac 电脑都配备了 Retina ,未使用 Retina 的型号包括 2015 年之前的 MacBook、2012 年中之前的 MacBook Pro 、非 4K5K 的 iMac 我尝试过 Dell P2715Q 27 英寸 4K ,无需配置直接支持 Mac 的 Retina,只可惜显示效果不佳,有一种把 1280*800 分辨率的幕调成了 1024*768 分辨率的放大感。 如果是外接前文提到的 Dell P2715Q 4K ,虽然可以渲染出 Retina 的高清效果,但幕刷新频率只有 30Hz 而非正常的 60Hz,在移动鼠标和观看网页动画时会有明显的失帧感。

    53090

    HTML head 头标签 总结

    通常会写 width=device-width 会导致 iPhone 5 添加到主后以 WebApp 全模式打开页面时出现黑边(http:bigc.atios-webapp-viewport-meta.orz ios 设备添加到主后的标题(iOS 6 新增) 是否启用 WebApp 全模式 设置状态栏的背景颜色 只有在 apple-mobile-web-app-capable content=yes 时生效 iPhone 和 iTouch,默认 57x57 像素,必须有 iPad,72x72 像素,可以没有,但推荐有 Retina iPhone 和 Retina iTouch,114x114 像素,可以没有 iPad 竖 768 x 1004(标准分辨率) iPad 竖 1536x2008(Retina) iPad 横 1024x748(标准分辨率) iPad 横 2048x1496(Retina) iPhoneiPod Touch 竖 320x480 (标准分辨率) iPhoneiPod Touch 竖 640x960 (Retina) iPhone 5iPod Touch 5 竖 640x1136

    90570

    【CSS】872- 浅析rem布局方案

    这里说明一下,无论dpr多大,1px的大小通常来说是一致的,这也就意味着,随着dpr的增大,物理像素点会越来越小,这样才能容纳更多的物理像素,才能更高清,更retina? 说完基本概念,来说一下几个问题:retina图片模糊首先普及一下位图像素:一个位图像素是图片的最小数据单元,每一个单元都包含具体的显示信息(色彩,透明度,位置等等)那为什么在dpr高的retina上反而会模糊呢 在1dpr的幕上,位图像素和物理像素一一对应没什么问题,但是在retina上,由于一个px由4个甚至更多的物理像素组成,并且单个位图像素不能进一步分割,所以会出现就近取色的情况,如果取色不均,那么就会导致图片模糊 虽然这样在dpr为1的幕上会导致1个物理像素上有4个位图像素,但是这种情况的取色算法更优,影响不大,不做讨论。 ,dpr为1,那么1px就是一个物理像素,但是在retina中。

    14220

    【Canvas】:High DPI 下的 Canvas 模糊问题

    用 Canvas 绘制了一个标尺组件;用 4K 做的测试;处于 1.5 倍缩放模式下发现文字显示效果很模糊; 2. 基础? is useful when dealing with the difference between rendering on a standard display versus a HiDPI or Retina Enabling your canvas to appear crisp on Retina as well as standard-definition displays is as simple as size 2;var y = size 2; var textString = I love MDN;ctx.fillText(textString, x, y);因此,要使 canvas 适配高倍: 将 canvas 放大到设备像素比来绘制;然后将 canvas 压缩成一倍的物理大小来展示;并且将 canvas中的线条大小、文字大小等都需要乘以设备像素比来进行绘制,否则高倍下的线条会变细几倍;参考

    33420

    CSS3 Media Queries模板

    {* CSS Styles *}3、640px显@media screen and (max-width : 640px) {* CSS Styles *}4、iPad横板显@media screen 2012年10月09日更新@media only screen and (min-width: 320px) { * Small screen, non-retina * } @mediaonly screen min-width: 320px),only screen and ( min-resolution: 2dppx) and (min-width: 320px) { * Small screen, retina to override above media query * } @media only screen and (min-width: 700px) { * Medium screen, non-retina to override above media query * } @media only screen and (min-width: 1300px) { * Large screen, non-retina

    6520

    css3二倍图

    比如以300200px 的图片举例:如果想让这张图片在 Retina 幕下达到应有的显示分辨率, 只需使用该照片的源文件导出一张清晰的 600400px 的图片,我们将其命名为 photo@2x.jpg ,替换现有的图片即可, 换成 @2X 图片,在 Retina 幕下的显示就清晰多了。

    47240

    CSS尺寸单位介绍

    后来随着技术的发展,移动设备的幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina,分辨率提高了一倍,变成640x960,但幕尺寸却没变化,这就意味着同样大小的幕上,像素却多了一倍 (device pixel radio)Retina幕所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块幕里,从而达到更高的分辨率并提高幕显示的细腻程度。 也被称为视网膜显示 ——百度百科因为Retina幕的出现,在pc端默认情况下,css中的1px等于1物理像素,但在移动端1px不一定等于1物理像素,比如说iPhone的设备独立像素是375 667, 因为它使用了Retina幕,他的dpr是2,所以iPhone 6 的物理像素为 750 1334在不同的幕上(普通幕 vs retina幕),css中1px所呈现的大小(物理尺寸)是一致的,不同的是 在普通幕下,1px 对应 1个物理像素(1:1)。 在Retina幕下(dpr=2),1px对应 2x2个物理像素(1:4)。

    32630

    CSS尺寸单位介绍

    后来随着技术的发展,移动设备的幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina,分辨率提高了一倍,变成640x960,但幕尺寸却没变化,这就意味着同样大小的幕上,像素却多了一倍 (device pixel radio)Retina幕所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块幕里,从而达到更高的分辨率并提高幕显示的细腻程度。 也被称为视网膜显示 ——百度百科因为Retina幕的出现,在pc端默认情况下,css中的1px等于1物理像素,但在移动端1px不一定等于1物理像素,比如说iPhone的设备独立像素是375 * 667 ,因为它使用了Retina幕,他的dpr是2,所以iPhone 6 的物理像素为 750 * 1334在不同的幕上(普通幕 vs retina幕),css中1px所呈现的大小(物理尺寸)是一致的 在普通幕下,1px 对应 1个物理像素(1:1)。 在Retina幕下(dpr=2),1px对应 2x2个物理像素(1:4)。

    31220

    手机端web学习基础--from慕课网

    1px=4dp,对应到长度(纬度),边长为2的正方形,长度1px=2dp.那么iphone5d 640*1136对应到px单位就是:320*568DPI:打印机每英寸可以喷的墨汁点(印刷行业)PPI:幕每英寸的像素数量 计算公式:ppi = √(11362+6402)4=326ppi(视网膜Retina)。注意:单位为硬件像素,非px.可视度越低,系统默认设置缩放比越大。? Retina(高清):dpr都是大于等于2?

    42050

    给MacBook写一个更好的Windows触摸板驱动程序

    不然等着蓝吧Polling 单独开一个 System Thread,然后 Synchronous IOCTL Request 能不用就不要用(我还需要改 SPI 的这一部分)。 非Retina MacBook?一些非Retina MacBook Pro(2011年和2012年)? 配备Retina显示的MacBook Pro(MacBookPro 10,1,MacBookPro10,2和MacBookPro11,1)? (正在进行中)带Retina显示的MacBook Pro(2014年,2015年)?(正在进行中)?MacBook Pro 2015,2016,2017

    41710

    C Retina

    14320

    相关产品

    • 腾讯云图

      腾讯云图

      腾讯云图 (CDV)是一站式数据可视化展示平台,旨在帮助用户快速通过可视化图表展示海量数据,10 分钟零门槛打造出专业大屏数据展示。精心预设多种行业模板,极致展示数据魅力。采用拖拽式自由布局,无需编码,全图形化编辑,快速可视化制作……

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券