移动端雪碧图sprite的实现

移动端适配的时候,通常是用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。

时间: 2024-11-08 11:14:34

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

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

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样

FIS 雪碧图sprite合并

1 安装fis(必须先安装node和npm):npm install -g fis3 2 构建项目发布到根目录下的output:fis3 release -d ./output 项目根目录:FIS3 配置文件(默认fis-conf.js)所在的目录为项目根目录. 3 sprite的配置文件(fis-config.js)如下: fis.match('::packager', { spriter : fis.plugin('csssprites') }); fis.match('*.css', {

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

显示目录 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇--雪碧图 定义 css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中.使用雪碧图的处理方式可以实现两个优点: [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 凡事都不完美,实现优点的同时也带来了缺点,即提

使用grunt对css中的background图片自动生成雪碧图

公司研发的系统为B/S架构,用户使用浏览器访问系统时,使用浏览器自带工具查看,对图片的请求数极多,多为小图片. 今天想对这个现状进行改善,网上查到一种雪碧图的方案,其实就是使用工具将数量很多的小图片拼成一张大图片,然后css里都引用这张大图片,并指定显示该图片的某一个区域,但这个方案需要手工作很多处理. 于是就想到能不能用目前比较成熟的grunt对前端样式文件自动进行处理,自动生成雪碧图,自动修改样式文件.一搜索果然找到了方案,下面为Gruntfile.js文件的片断: module.expor

雪碧图(图片拼合技术)

雪碧图 (sprite)是一种图片拼合技术: 使用方法: 1.定视口 width: xx px; height: xx px; 2.插图 background-image: url("图片路径"); 3.移动位置 background-position: x轴坐标 y轴坐标: 优点:将小图标拼合到一张图片里,占用内存少,对开发人员来说就不用麻烦给每个小图标命名,还可以有效地加快网页的加载速度,可以有效增强用户体验: 缺点:需要利用相关图片查看软件找到每个小图标的准确坐标,相对来说比较繁

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

雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一张图:  2.雪碧图的使用 首先确定要使用的图标的位置和大小(可以通过ps测量), 如下的雪碧图大小统一,排列规则 它们的大小均为30px*30px,第一个图标位置为0 0,第二个的位置为30px 0,依次... 样式可以这样写: 1 .box1 li:nth-child(1) { 2 width:

compass与css sprite(雪碧图)

什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链接:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites 优点:1.减少页面请求数 2.降低图片占用字节 缺点:1.拼图麻烦 2.后期维护麻烦 为什么使用compass? 最近项目中需要使用到很多小图片,想用

css sprite 雪碧图

一.什么是雪碧图? 1.我们先来看一下淘宝上面用到的雪碧图实例: a.前端展示 b.css雪碧图为 2.概念 CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 3.什么时候用到雪碧图? a.静态图片,不随用户信息的辩护而变化 b.小图片,图片容量比较小 c.加载量比较大 4.工具介绍 刚刚下载了一个比较实用的雪碧图工具Css Spri

移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖进去后自己调) 然后点击右边绿色的make按钮即可 点击后,上面的选项会高亮,提示你制作好了, 点击PNG选项即可下载制作好的雪碧图, 点击css选项即可查看每个小图标在雪碧图中对应的x和Y位置 对于PC端来说,基本就完成了. 对于移动端采用rem布局的,则需要多一些步骤: 首先将对应的x和y位置转