雪碧图在移动端的自适应

最新推荐文章于 2022-09-19 10:30:01 发布

程欢o

最新推荐文章于 2022-09-19 10:30:01 发布

阅读量258

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_29947843/article/details/116407315

版权

前端专栏收录该内容

24 篇文章

订阅专栏

本文介绍了两种在前端开发中转换像素单位的方法。方法一是使用SCSS函数torem()配合背景图片的设置，将px转换为rem。方法二是利用postcss-px-to-viewport插件，将px单位自动转换为适合移动端视口的单位。这两种技术对于响应式设计和优化移动设备的布局非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//方法一，可以使用网易转换rem的那一套，配合scss函数使用
background-size: x y; //为实际上完成后的雪碧图的宽高
@function torem($px){
	@return $px / 64px *1rem;
}

@mixin spImg($url, $left, $top. $imgWidth){
	background: url($url) no-repeat $left $top;
	background-size: $imgWidth;
}

//方法二，使用px，使用插件postcss-px-to-viewport