精灵图 html为什么会变大,CSS Sprite精灵图如何缩放大小

在移动端项目当中，如果要使用精灵图的话，因为我做了px自动转换vw单位，所以在使用的时候，position位置正常写单位是px，但是转化成vw后就找不到对应的图片了

"postcss-px-to-viewport": {

viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750

viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)

viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw

selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名

minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值

mediaQuery: false // 允许在媒体查询中转换`px` }著作权归作者所有。

在设置的时候因为我设置了ignore和 hairlines这两个类名不会自动转换，所以需要在标签中使用这两个类名来设置background-position。

然后再移动端中，因为缩放的比例问题，px单位太大。

可以用两个方法解决:

transform:scale( x ):

语法为:transform: scale(x,y). 同时有scaleX, scaleY专门的x, y方向的控制。

例如:transform: scale(0.5) 缩小为原来的一半

和zoom不同,scale并不支持百分比值和normal关键字,只能是数值。而且,还能是负数,没错,负数。而zoom不能是负值!

zoom:x

例如:zoom:0.5 也是缩小为原来的一半

zoom和transform:scale的差别是:、

1:在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染,而scale只是在当前的元素上重绘。意思是,当你给一个div固定宽高时,scale变化的时候,其原本的宽高还是不变的,你给div height200px,width:200px, scale(0.5)即为缩小为原来的一半时,他的height和width还是200px, 只不过里面的元素缩小了而已。因此,就没有layout的重计算。

2:但是zoom牵一发动全身,zoom:0.5后 ,width和height就变成了100px。

精灵图 html为什么会变大,CSS Sprite精灵图如何缩放大小相关推荐

CSS Sprite精灵图如何缩放大小
transform:scale( x ): 语法为:transform: scale(x,y). 同时有scaleX, scaleY专门的x, y方向的控制. 例如:transform: scal ...
精灵图 html为什么会变大,[html] 第128天精灵图和base64如何选择呢？
可参考https://www.cnblogs.com/wangqi2019/p/10498627.html Css Sprites(雪碧图或css精灵),是网页图片处理的一种方式,它允许你将一个页面涉 ...
CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
html中精灵图片路径,css中精灵图是什么意思？
css中精灵图是什么意思?有什么用?下面本篇文章就来给大家介绍一下CSS 精灵图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css中精灵图是什么意思? css精灵图(sprit ...
html精灵图坐标如何确定,CSS实现精灵图与字体图标
精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓 ...
使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
html语言把字变大,css怎么让字体变大？
css可以通过font-size属性让字体变大,font-size属性可设置字体的尺寸.所有主流浏览器都支持font-size属性. font-size 属性可设置字体的尺寸. 说明该属性设置元素的 ...
css（精灵图和字体图标）
1. 精灵图(重点) 1.1 为什么需要精灵图为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites.CSS 雪碧). 核心原理: ...
css高级技巧(精灵图、字体图标、三角、vertical-align属性、溢出文字省略号等)
css高级技巧 1.精灵图 1.1.为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送图片,造成服务器请求压力过大,这将大大降低页面的加载 ...

精灵图 html为什么会变大,CSS Sprite精灵图如何缩放大小

精灵图 html为什么会变大,CSS Sprite精灵图如何缩放大小相关推荐

最新文章

热门文章