移动端适配的时候，通常是用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. Linux命令之常用篇

    一.文件和目录 1. cd命令 它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径. 指令 说明 cd /home 进入‘home’目录 cd .. 返回上一级目录 ...

  2. Binwalk的安装和使用

    Binwalk的安装和使用 一.安装Git 参考链接:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067 ...

  3. OneHotEncoder独热编码和 LabelEncoder标签编码

    学习sklearn和kagggle时遇到的问题,什么是独热编码?为什么要用独热编码?什么情况下可以用独热编码?以及和其他几种编码方式的区别. 首先了解机器学习中的特征类别:连续型特征和离散型特征 拿到 ...

  4. HTTP协议与TCP/IP协议

    OSI 是7层         TCP/IP 协议是 4层. OIS 包括的层 从底到上依次为 1.物理层 2.数据链路层 3.网络层 4.传输层 5.会话层 6.表示层 7.应用层 TCP/IP  ...

  5. Spring自动注入之@Autowired、@Resource、@Inject

    相同点: 三者都支持对spring bean的自动注入 不同点: ①Autowired按照类型进行注入( Bean bean = applicationContext.getBean(Bean.cla ...

  6. String.Join Method

    Overloads Join(String, String[], Int32, Int32) Concatenates the specified elements of a string array ...

  7. vue项目笔记

    参考了很多网上其他人的 1.安装 npm与cnpm:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等):npm可以在node ...

  8. Linux-#!/bin/sh理解

    #!是一个特殊符号,/bin/sh是用来解释该脚本的的shell路径 #!/bin/sh指该脚本使用/bin/sh来执行 sh只是其中一种解释方式,通过如下命令可以查到支持的shell解释方式: xx ...

  9. <知识整理>树--堆及其应用

    预备知识: 完全二叉树的定义:一个深度为k数的二叉树(设根节点的深度为1),若二叉树深度从1到k-1层都是满的,而第k层的节点都集中在左边(即第k层不存在两节点之间有空缺),那么此数就被叫做完全二叉树 ...

  10. （八）控件介绍，QLable

    Radio单选框 默认互斥,加GroupBox进行分组可以解决这个 checkBox复选 ListWidget TableWIdget:有表头 #include "widget.h" ...