移动端适配的时候，通常是用rem作为长宽单位，因此，在不同的设备下，元素的实际宽高（px）是不一样的，如果是单张图片作为为背景图片的时候，最为方便，只要设置背景图片的属性background-size:contain|conver|100%;都能够将图片盖住整个div。

其次如果用雪碧图的话，那么得将 背景图片的大小和位置改为rem单位。background-position：x.x rem  y.y rem;background-size : xxrem yyrem;此处就是将按照设计稿的px来转换为rem。原理就是背景图片的大小，还有显示的背景图片位置都用rem来相对变化，就能够正确的显示对应的icon。

移动端雪碧图sprite的实现的更多相关文章

  1. 移动端适配之雪碧图(sprite)背景图片定位

    为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...

  2. FIS 雪碧图sprite合并

    1 安装fis(必须先安装node和npm):npm install -g fis3 2 构建项目发布到根目录下的output:fis3 release -d ./output 项目根目录:FIS3 ...

  3. 关于css雪碧图sprite

    天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就 ...

  4. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  5. 前端工程师技能之photoshop巧用系列第五篇——雪碧图

    × 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...

  6. css中雪碧图(sprite)的使用及制作方法

    雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...

  7. 移动端适配之sprite雪碧图背景定位

    移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...

  8. css sprite，css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  9. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

随机推荐

  1. Python的生成器send()方法 & yield_from

    生成器对象是一个迭代器.但是它比迭代器对象多了一些方法,它们包括send方法,throw方法和close方法.这些方法,主要是用于外部与生成器对象的交互.本文先介绍send方法. send send方 ...

  2. Element-UI动态更换主题

    参考:vue-基于elementui换肤[自定义主题] 实践: 需求1.后期维护主题色不更换:  直接在线主题生成工具下载,在APP.VUE引入:(注意Element UI 版本1.3?2.0) 需求 ...

  3. 使用栈实现队列(2)(Java)

    class MyQueue { private Stack s1; private Stack s2; public MyQueue(int size) { this.s1 = new Stack(s ...

  4. git 拉取远程分支到本地

    步骤: 1.新建一个空文件,文件名为hhhh 2.初始化 git init 3.自己要与origin master建立连接(下划线为远程仓库链接) git remote add origin git@ ...

  5. Web APP & 弹窗插件

    Web APP & 弹窗插件 移动端弹窗插件 alert.confirm.toast.notice 四种类型弹窗 jQuery & Zepto https://github.com/s ...

  6. [SCOI2009]生日礼物题解

    题目 一道模拟和队列题,但模拟比队列的成分多一些.队列也就是用两个指针模拟的. 可以用枚举的思想.首先我们知道r(即区间的右端点是肯定不会左移的),而l右移的同时,r可能不变,也可能右移,所以这样就可 ...

  7. THUWC2019滚粗记

    Day-1 今年年初,留坑,以后补,多多关注. Day0 上午吃了碗粉,就坐地铁到了高铁站. 做高铁从长沙到了广州,最大的感受就是热热热热热热热热. 所以太热了不说了.(雾 汉堡王真香 Day1 上午 ...

  8. Intellij IDEA 14中使用MyBatis-generator 自动生成MyBatis代码

    一:项目建立好及其基本的测试好 二:在maven项目的pom.xml 添加mybatis-generator-maven-plugin 插件 <build> <finalName&g ...

  9. 在centos 7 下安装 nginx

    在Linux下安装 nginx 1下载对应当前系统版本的nginx包(package) wget  http://nginx.org/packages/centos/7/noarch/RPMS/ngi ...

  10. jsp:include动作功能

    jsp:plugin动作:连接客户端的Applet或Bean插件 jsp:useBean动作:应用javaBean组件 jsp:setProperty动作:设置javaBean属性 jsp:getPr ...