css图片2x和3x，css给图片设置大小

为什么移动端需要@2x或者@3x的图片

1、但实际上两者有一倍差异。为了达到最佳效果，使用的图片大小不一样。这时候就用同一个名称，但 Retina 的图加上 @2x 后缀。系统加载图片时，在 iPad2 上会加载 @1x 的图在 1536 * 2048 的设备上，会加载 @2x 的。

2、这是因为iPhone 4中1个点等于2个像素，也就是30 x 40像素的图片，占据了60 x 80像素的屏幕。 所以为使得图片清晰，需要进行图片适配。

3、手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑安卓/IOS的各种尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现更好地适配不同屏幕宽度的移动设备。

相关问答

Q1: 【iOS】iOS开发之使用Mac自动操作制作@1x@2x@3x图片(切图)

苹果IOS程序开发不同分辨率的设备统一为一个尺寸而标记的。@3X就是@1X分辨率的3倍。iPad2 是768 x 1024，iPad Retina 是1536 x 2048，开发时都按 768 * 1024 操作。但实际上两者有一倍差异。

苹果官网的设计规范 图片和图标尺寸相关 从官网的资料我们可以看出，@1X@2X@3X是苹果ios开发不同分辨率的设备统一为一个尺寸而标记的，数字3表示分辨率的倍数。

就会看到工程xcassets中一张图片有3张尺寸：@1x @2x @3x 当工程中使用名字为example的图片时候，会根据 屏幕模式 自动选择对应的图片。

@1x @2x @3x是开发工具Xcode软件需要的UI资源，命好名称后，IOS设备会自动的选取合适尺寸。 ③共用资源的图片，输出一张就可以 类似这种重复的按钮之类的，只要提供一张共用的资源就可以了；上面的文字是技术写上去的。

可能要问问苹果了...)依此类推，得出换算公式一：若有小数，四舍五入即可。在 iOS 开发中，目前只需要 @2x 和 @3x 两种切图，所以导出 2 倍和 3 倍的 png 图片即可。

Q2: android中ui给的2x和3x图怎么用

1、从官网的资料我们可以看出，@1X@2X@3X是苹果ios开发不同分辨率的设备统一为一个尺寸而标记的，数字3表示分辨率的倍数。

2、x和3x的概念不是具体尺寸，是交付前端开发产物的切图后缀。IP5，6，7当然切图后缀都是2x，也就是二倍图。

3、在 iOS 开发中，目前只需要 @2x 和 @3x 两种切图，所以导出 2 倍和 3 倍的 png 图片即可。

Q3: UI设计中ps里画2x和3x的尺寸到底是多少48X48是几x

1、x和3x的概念不是具体尺寸，是交付前端开发产物的切图后缀。IP5，6，7当然切图后缀都是2x，也就是二倍图。

2、移动端UI设计文件，目前以ihone6，750X1334px为基准可向上向下适配，@2X图基本可以与安卓系统2倍图相适配。分辨率为72像素。

3、如果以iPhone为设计设备，尺寸一般是使用750x1334，1125 x 2436，1242 x 2208这三种尺寸设计都可以，750x1334是2倍图设计，1125x2346和1242x2208都是3倍图来进行设计。

4、Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。 无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。

Q4: 切图常说的@1X@2X@3X是什么意思

1、从官网的资料我们可以看出，@1X@2X@3X是苹果ios开发不同分辨率的设备统一为一个尺寸而标记的，数字3表示分辨率的倍数。

2、这是因为iPhone 4中1个点等于2个像素，也就是30 x 40像素的图片，占据了60 x 80像素的屏幕。 所以为使得图片清晰，需要进行图片适配。

3、因此我们采用 @2x 或者 @3x 的图片，就是为了使图片的位图像素和设备位图像素的数目接近于 1：1，就能使图片清晰显示不模糊。

4、@3x是@2x尺寸的5倍，例如一个图标切图@2x尺寸是44px，那么@3x尺寸是66px。为了提升APP使用速度，尽量降低图片文件大小 在切图资源输出中图标切图输出是很重要的部分，比如新手引导页、启动页面、默认图、广告图等。

关于css图片2x和3x和css给图片设置大小的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。