移动设备上“精灵图”的制作适配

不废话了，直接贴代码

#introduceHonor3  .collaborate .collaborateList ul .collaborateImg{background-image:url(../img/exploreSuddenfix/consociationList.png)!important;background-size: 23.84rem auto;float:left;width:1.62rem;height:1.1rem;
}
#introduceHonor3  .collaborate .collaborateList ul  i{margin:0.4rem 0;display:inline-block;float:left;width:0.02rem;height:0.3rem;background:rgba(209,246,243,1);
}
#introduceHonor3  .collaborate .collaborateList ul .chinaUnicom{background-position:-8.08rem  0 ;
}

2个重点：
1: background-size: 23.84rem auto;
23.84rem = 1192/50;
1192是我的精灵图的width；
我的适配是50;所以、50；一般都是100；根据自己的适配大小；

background-position:-8.08rem 0 ;
就是就是靠自己去计算了；
如果能帮到你我也荣幸，谢谢

移动设备上“精灵图”的制作适配相关推荐

移动设备上“精灵图”的制作
"精灵图"简单说来就是把网页中的图标文件合成到一张图片上,目的是每次http请求页面的时候只请求一张图片,不需要对服务器多次请求. 这是一张合成好的"精灵图", ...
003day （css文本、列表、背景相关属性，精灵图的制作）
一.css文本相关属性 1.字体的颜色也可以转换为16进制的颜色(可以直接百度搜索16进制颜色表)和rgb属性的颜色.例如:red=#b0b0b0=rgb(211,176,33). 一共三种表现形式像 ...
Unity开发Hololens2—环境配置和官方案例发布并部署到设备上
一.前言我使用的Unity2018.4.26f1+Hololens2+VS2019设备其实大部分的环境配置的问题和发布官方已经给出了详细的说明,首先是安装工具,然后是.初始化项目并部署第一个应用程序 ...
css 手机设备上的像素适配
原文链接:github文章地址曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大 ...
CSS Sprites精灵图（雪碧图）的使用以及利用工具制作
CSS Sprites的原理(图片整合技术)----精灵图(雪碧图) 原理: 将导航背景图片.按钮背景图片等有规则的合并成一张背景图,将多张图片合为一张整图,然后用background-positio ...
移动端精灵图适配问题---------你是不是掉坑里了？
最近在学习移动的rem布局,写一个小案例的时候遇到了精灵图适配的问题,特此记录的一下. 这是一张宽度为750px的设计图,我把它的宽度分成15份,每一份的大小作为html的字体大小,相当于1rem=5 ...
CSS高级技巧：精灵图、字体图标、三角形制作、布局技巧
CSS高级一.精灵图二.字体图标字体图标的优点: 这里附一下阿里的字体图标使用方法: 三.三角形制作四.一些样式 1.用户界面鼠标样式cursor 2.轮廓线outline 3.防止拖拽文本域 ...
Unity制作简单的精灵图动画（新手向）
使用精灵图制作动画步骤: 1.精灵图准备 2.制作动画一.精灵图导入与切割第一种情况:导入的是已经切割好的精灵图,请直接跳动到二第二种情况:导入的是需要切割的精灵图,需要切割,切割步骤: 1按照 ...
响应式设计和移动端优化：如何实现页面在不同设备上的适配和优化
章节一:介绍响应式设计和移动端优化响应式设计是一种使网页能够自适应不同设备和屏幕尺寸的设计方法.它通过使用流式网格布局.媒体查询和弹性图片等技术,使得网页能够在不同分辨率和设备上呈现出最佳的布局和用 ...

移动设备上“精灵图”的制作适配

移动设备上“精灵图”的制作适配相关推荐

最新文章

热门文章