码迷,mamicode.com
首页 > 移动开发 > 详细

移动端 CSS sprites 的 background-size 如何计算的。

时间:2015-05-18 10:44:28      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:


最近践行 移动端实例,第一遇到的问题就是这个。如何找到自己需要的图片位置。

 

另外我看到说 CSS sprites 比 DataURL 要快很多,不过我看的是13年的一个分析,这好多年过去,不知道最新的如何。

我其实还不知道写图片元素的话 是用 img标签呢 还是用 background 呢?

 

以下是查阅到的如何计算background-size 的资料。感谢分享。

 

正常PC设置时:

1 .s1{
2     width:22px;height:38px;background-position:-118px -0px;
3     background-image:url(images/icon2b.png);
4     display:inline-block;
5 }

 

但在ios上,因为iphone 上是双倍显示的,so:

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max-moz-device-pixel-ratio: 2) {
    .s1{
        width
:11px;height:19px;/*目标 之前的一半*/
        background-position
:-59px -0px;/*改变 之前一半*/
        background-image
:url(images/icon2b.png);
        display
:inline-block;
        background-size
:180px 180px;/*大小 是css sprites 图片的一半大小*/
    
}

} 


background-size计算方式为:

高分辨率图像宽度(电脑) / 目标图像宽度(手机) = X 

原始Sprites图像宽度 / x = background-size的宽度值

这里我设置的电脑图片宽度为(电脑):22

这里我设置的手机目标宽度为:11

原始sprites图片大小为:360*360

x=22/11=2

background-size宽度:360/x=180px

 

background-position:-59px 0(计算方式:原来的(-118)除以x)

 

感谢:源头:http://www.luchanan.com/archives/322

 

移动端 CSS sprites 的 background-size 如何计算的。

标签:

原文地址:http://www.cnblogs.com/hanyuxinting/p/4511140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!