移动端适配的时候，通常是用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. As-If-Serial 理解

    as-if-serial语义的意思指: 不管怎么重排序(编译器和处理器为了提高并行度),(单线程)程序的执行结果不能被改变.编译器,runtime 和处理器都必须遵守as-if-serial语义.为了 ...

  2. 最大k乘积问题

    68.最大k乘积问题 (15分)C时间限制:3000 毫秒 | C内存限制:3000 Kb题目内容:设I是一个n位十进制整数.如果将I划分为k段,则可得到k个整数.这k个整数的乘积称为I的一个k乘积. ...

  3. keras01 - hello world ~ 搭建第一个神经网络

    import numpy as np from keras.datasets import mnist from keras.models import Sequential, Model from ...

  4. jstl的foreach标签

    jsp支持丰富的jstl标签语言(需要jar包支持),其中list循环(迭代)用的是<c:forEach></c:forEach>标签. 这个标签的作用就是迭代输出标签内部的内 ...

  5. python工程师成长之路精品课程（全套）

    python工程师成长之路精品课程(全套)  有需要联系我:QQ:1844912514 什么是Python? Python是一门面向对象的编程语言,它相对于其他语言,更加易学.易读,非常适合快速开发. ...

  6. linux 上 mysql 的使用

    1.登录mysql 第一次登录 没有密码 可以直接输入 mysql 有密码可以使用  mysql -u root -p  回车会提示需要输入密码  -u 用户名 -p 密码 这个mysql文件在/us ...

  7. 使用react全家桶制作博客后台管理系统

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...

  8. 资源预加载preload和资源预读取prefetch简明学习

    前面的话 基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用 资源优先级 在介 ...

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

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

  10. postgresql数据库去重方法

    数据库去重有很多方法,下面列出目前理解与使用的方法 第一种 通过group by分组,然后将分组后的数据写入临时表然后再写入另外的表,对于没有出现再group by后面的field可以用函数max,m ...