移动端适配的时候，通常是用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. 人生第一个过万 Star 的 github 项目诞生

    写 Spring Boot 开源项目走入第三个年头,终于有一个开源项目要破万 Star 了,请各位读者大人批评指正. Spring Boot 文章 2016年,我开始学习 Spring Boot 的时 ...

  2. MySQL在windows上多次安装失败

    Mysql首次安装: 1.官网下载mysql安装包 2.安装选择自定义,custom 3.更换路径,然后按需求选择,选择标准就行 Mysql重复安装需要注意的问题: 1.程序和功能下,需要卸载MySQ ...

  3. linux 下ab压力测试

    1.ab的简介 ab是apachebench命令的缩写. ab是apache自带的压力测试工具.ab非常实用,它不仅可以对apache服务器进行网站访问压力测试,也可以对或其它类型的服务器进行压力测试 ...

  4. 【zabbix教程系列】三、zabbix 3.4 在centos 7 上安装详细步骤

    一.环境准备 [root@ltt01 ~]# ip a : lo: <LOOPBACK,UP,LOWER_UP> mtu qdisc noqueue state UNKNOWN qlen ...

  5. Linux(Ubuntu)使用日记------为程序添加桌面快捷方式

     我们Ubuntu中的所以的程序的快捷方式都放在了/usr/share/applications文件夹下,都是以.desktop结尾的文件.我们可以在这个文件夹下创建我们的快捷方式,然后复制到桌面即可 ...

  6. seaborn库

      首先找到Anaconda Prompt命令行,下载seaborn库 ,命令  pip install seaborn 1.风格设置 import seaborn as sns import num ...

  7. Ffmpeg使用

    ffmpeg官网 刚开始安装的推荐博客|--利用FFmpeg 开发音视频流:一.二.三 1.分辨率码率 主要视频格式与码率: 分辨率 200p——对应的码率是256kpbs,也就是说,一分钟需要流量1 ...

  8. 树 相关知识总结以及Java实现

    最近在温习树相关的知识,并且用java实现了一下树的遍历相关,先贴上代码供大家参考吧. package tree_problems; import java.util.ArrayDeque; impo ...

  9. java篇 之 java概念

    Jvm:java虚拟机,让java拥有跨平台的能力,一次编写,导出运行 Java优点:提供了一个解释性环境(多线程,可执行程序跨平台,加快开发,支持动态更新) 没有指针,有垃圾将回收器(回收内存) 执 ...

  10. python爬虫基础应用----爬取校花网视频

    一.爬虫简单介绍 爬虫是什么? 爬虫是首先使用模拟浏览器访问网站获取数据,然后通过解析过滤获得有价值的信息,最后保存到到自己库中的程序. 爬虫程序包括哪些模块? python中的爬虫程序主要包括,re ...