移动端开发为什么使用@2x@3x图片
物理、逻辑与位图像素的概念
关于设备物理像素和逻辑像素,这两个像素一个是实体的,一个是抽象的单位。除此之外还有一个不可忽视的像素,就是位图像素。
物理像素(设备像素):指的是设备屏幕实际拥有的像素点。一个设备生产出来,它的像素就已经确定了,iphone6的分辨率是375px * 667px。
逻辑像素(CSS像素):是我们进行CSS样式设计时的一种抽象单位,它可以自动在不同设备之间调节。
设备像素比 = 设备的物理像素 / CSS像素
如果设备像素比为2,就意味着设置的 1px CSS 像素,在设备上实际使用了2个物理像素单元来进行渲染,所以实际看到的一定会比 1px 粗一些。
位图像素:一般我们在页面上使用的图片都是位图,位图像素是位图最小单位,不可再拆分。位图像素是图片本身的特性,在图片产出时就已经确定了,和 CSS 像素以及设备像素没有任何关系。
问题:图片在Retina下却变模糊
以 IPhone6 为例,IPhone6 手机的尺寸为 375px * 667px,如果我们在 PC(非 Retina 屏)上制作出一个宽度为 375px 的图片,该图片在电脑上显示正常,但在手机上显示就模糊了。
分辨率越高,图片显示不应该越清晰吗,为什么图片反而变得模糊了呢? 这个问题需要从以下几个方面来解释:
像素是显示的最小单位,不可拆分;
由于设备像素比的原因,CSS 的 1px 或位图的 1px 不一定等于物理像素的 1px。
前面我们提到过:设备像素比的意义在于规定设备以多少个物理像素来显示 1px 的 CSS 像素。该结论对于位图一样适用:设备与位图的像素比规定了设备以多少个物理像素来显示 1px 的位图像素。
举个例子:
如果我们在设备1上看这张图片,将会以 375 * 200 = 75000 个物理像素来显示,因此图片的清晰度不变。但如果我们在设备2上预览这张图片,将会以 375 * 200 *4 = 300000 个物理像素来显示这张图片。其用来显示图片的物理像素个数为图片像素的 4 倍,而图片实际上只有 75000 个有效像素。
因为像素是最基本的单位,无法再进行拆分,所以剩下的 300000 - 75000 = 225000 个物理像素将采用填充的方法来显示图片。所谓填充,就是就近取色,这也是造成图片模糊的原因。
解决方案:使位图像素和设备像素的数目接近
现在我们就能来回答,为什么在移动设备开发者经常使用到@2x、@3x的图片了。
前面已经知道,造成图片模糊的原因是位图的像素总数和对应的物理像素个数不一致,那么只需要增加图片的位图像素数目,使其接近于设备物理像素就解决了这个问题。 因此,要想完美的适配多种设备,就需要针对不同设备采用 @2x 或者 @3x 的图片,使图片的位图像素和设备位图像素的数目接近于 1:1,就能使图片清晰显示不模糊。
移动端开发为什么使用@2x@3x图片的更多相关文章
- python Image resize 对iOS图片素材进行2X,3X处理
通常在iOS上开发使用的图片素材1x,2x,3x三种 下面利用python Image 库 resize函数,由一个大图,自动生成1x,2x,3x的素材照片: 1. 首先你的python环境要安装有I ...
- iOS开发 2x 3x图
众所周知,iOS开发中的图片资源一般需要2倍图和3倍图,也就是2x,3x,但是最近思考了一个问题,为什么不能只提供3x的图片,2x的图片让系统从3x压缩就好了,于是上网搜索了下,得到了答案. 当我们在 ...
- 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- 图片背景2X && 3X
图片背景2X && 3X @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ .share_ ...
- 自动由@3x图片生成@2x和@1x的图片 - Xcode插件
原文:http://www.cocoachina.com/bbs/read.php?tid=277187 生成@3x图片对应的@2x和@1x版本--RTImageAssets 关键字:Xcode插件, ...
- 29.html5 移动端开发总结
手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视 ...
- html5 移动端开发
移动端开发总结 目录 1.手机与浏览器 2.Viewport(视窗) 3. 媒体查询 4.px,em,rem,pt 5.设备像素比devicePixelRatio 6.移动web中的图标及字体 ...
- iOS 2x 3x
iOS中: 备注: Retina是一种显示技术,可以将把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度.而其最初该技术是用于苹果的iPhone4上.其屏幕分辨率为960×6 ...
- web移动端开发技巧与注意事项汇总
一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...
随机推荐
- Android App发布遇到的问题总结【转】
感谢大佬:https://www.cnblogs.com/jeffen/p/6824722.html 问题描述(v1和v2) Android 7.0中引入了APK Signature Scheme ...
- Mysql Json函数之更新 (四)
修改JSON值的函数 本节中的函数将修改JSON值并返回结果. JSON_APPEND(json_doc, path, val[, path, val] ...) 将值附加到JSON文档中指定数组的末 ...
- IOS tableView 滑动删除与排序功能
// // ViewController.m // 0429 // // Created by apple on 15/4/29. // Copyright (c) 2015年 gense. All ...
- 2022寒假集训day5
day5 五道栈的题加上字符串. 单调队列. T1 表达式括号匹配 洛谷P1739 题目描述 假设一个表达式有英文字母(小写).运算符(+,-,*,/)和左右小(圆)括号构成,以"@&q ...
- ASP.NET Core 6框架揭秘实例演示[02]:基于路由、MVC和gRPC的应用开发
ASP.NET Core可以视为一种底层框架,它为我们构建出了基于管道的请求处理模型,这个管道由一个服务器和多个中间件构成,而与路由相关的EndpointRoutingMiddleware和Endpo ...
- 文本处理命令(sort+uniq+cut+tr+wc)+三剑客之sed
目录 文本处理命令+三剑客之sed 一.文本处理命令 1.排序命令 sort 2.检查/删除命令 uniq 3. cut 显示特定部分命令 4. 替换或删除命令 tr 5.统计 计算数字命令 wc 二 ...
- MXNet学习:预测结果-识别单张图片
用到了model里的FeedForward.load和predict import os import mxnet as mx import numpy as np import Image from ...
- IO_FILE——leak 任意读
在堆题没有show函数时,我们可以用 IO_FILE 进行leak,本文就记录一下如何实现这一手法. 拿一个输出函数 puts 来说,它在源码里的表现形式为 _IO_puts . _IO_puts ( ...
- IDEA使用JDBC链接MySql(java编程)
1.在Maven的pom.xml文件中引入MySql的驱动 <dependency> <groupId>mysql</groupId> <artifactId ...
- Java泛型的那些事
1.泛型概述 1.1.为什么使用泛型 没有泛型,在编写代码时只能使用具体类型或Object类型,无法做到使用者想要使用什么类型就是类型.比如:创建一个方法,形参需要指定需要使用的数据类型,在创建方法之 ...