移动端雪碧图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。
移动端雪碧图sprite的实现的更多相关文章
- 移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
- FIS 雪碧图sprite合并
1 安装fis(必须先安装node和npm):npm install -g fis3 2 构建项目发布到根目录下的output:fis3 release -d ./output 项目根目录:FIS3 ...
- 关于css雪碧图sprite
天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就 ...
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- 前端工程师技能之photoshop巧用系列第五篇——雪碧图
× 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...
- css中雪碧图(sprite)的使用及制作方法
雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...
- 移动端适配之sprite雪碧图背景定位
移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...
- css sprite,css雪碧图生成工具V3.0更新
V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...
- 使用compass自动合并css雪碧图(css sprite)
本文转载自: 使用compass自动合并css雪碧图(css sprite)
随机推荐
- robotframework上的字体放大和缩小是ctr++和ctl--
- [kuangbin带你飞]专题二十二 区间DP-B-LightOJ - 1422
题意大概是这样,第i天必须穿a[i](某一种类)的衣服,你可以套着穿很多件,对于第i天,你有两种操作,一种是脱掉现在的衣服,一种是穿上新的一件,但是你脱掉的衣服,以后不能再穿.问最少需要多少件衣服? ...
- Spring项目定时任务
最近某协会网站有个需求:显示当天访问量,很明显需要做俩步:一个是访问请求量的显示,一个需要每天00点恢复访问次数为0 所以需要做个定时任务:每天00点更新: 注解用法Spring配置: 1.在spri ...
- JAVA基础知识回顾(面试资料)
关于数据库知识和面试:https://www.cnblogs.com/yanqb/p/9894943.html 关于数据库知识和面试:https://www.cnblogs.com/yanqb/p/1 ...
- Cnario Player 接入视频采集卡采集外部音视频信号测试
测试产品 型号: TC-D56N1-30P采集卡 参数: 1* HDMI 1.4输入, PCIe 接口为PCI-Express x4(Gen2), 最高支持4096x2160@30Hz, 支持1920 ...
- Mysql中的explain和desc
查询分析器 desc 和 explain 作用基本一样,explain速度快一点 explain 一条SQL语句出出现以下参数, 其中id,select_type,table 用于定位查询,表示本行参 ...
- 2019-04-10 集成JasperReport
1. 报表的制作过程为 ① 制作.jrxml报表模板文件,并编译成.jasper ② 代码处理.jasper文件并填充数据进行输出 2. 一开始是打算使用iReport作为模板制作工具的,但是有以下局 ...
- WIN10解决:失败 – 检测到病毒文件下载失败问题
欢迎访问我的个人博客四个空格,本文永久链接移至:WIN10解决:失败 – 检测到病毒文件下载失败问题 这个是Windows防火墙的原因,直接按WINDOWS键,输入windows,窗口搜索:Windo ...
- navicat导入sql文件错误
场景:100多M的sql文件导入到本地数据库报错,本地环境,phpstudy,报错一1294 - Invalid ON UPDATE clause for 'create_time' column,报 ...
- pycharm中查找一个对象在哪里被引用
pycharm中查找一个对象在哪里被引用 2018年10月28日 19:22:20 vivian_wanjin 阅读数:1600 PyCharm的Find Usages功能可以查找某个对象(变量. ...