css基线实例详解(移动端使用 rem 单位时 css sprites 定位问题的解决)
css基线实例详解
移动端使用 rem 单位时 css sprites 定位问题的解决现在开发移动端 wap 页面,相信大家都会使用强大的 rem 单位去适配各种机型和屏幕;为了减少网络请求数量,提高网页访问性能,一般都会把多个小 icon 合并成一张 sprite 图,然后根据 background-position 进行定位;但是由于计算机的计算偏差,常常会导致 icon 的显示有1到2像素的偏差;
一、PC 端
如果在 PC 端,雪碧图的定位其实非常简单,不多说,直接上代码:
html 代码
<ul class="sprites-box"> <li class="icon icon-bill"></li> <li class="icon icon-emailmsg"></li> <li class="icon icon-import"></li> <li class="icon icon-music"></li> <li class="icon icon-pay"></li> <li class="icon icon-search"></li> <li class="icon icon-speak"></li> <li class="icon icon-task"></li> </ul>
css 代码
body, ul { margin: 0; } ul { padding: 50px; list-style: none; overflow: hidden; } li { float: left; margin: 10px; } .icon { background-image: url('./sprite.jpg" alt="css基线实例详解(移动端使用 rem 单位时 css sprites 定位问题的解决)" border="0" />
效果
因为其使用 px 定位,且屏幕单位和倍率都是固定的,所以可以完美的实现雪碧图效果;
二、移动端
在移动端,由于各种机型的屏幕倍率,使得使用 px 作为单位的布局会有很大的适配问题,所以现在主流的适配方案就是使用 rem 作单位,并且根据屏幕倍率计算 rem 的基值进行适配;
本人是以宽为 750 的设计稿为基础,每 1rem 的值为设计稿中 100px 的长度; 由于 icon 的大小尺寸基本一致,故稍微做了点处理,裁切掉了 icon 的透明部分,合成尺寸不统一的 sprite 图;
1、直接转换为 rem 单位 换算后以上雪碧图的 css 代码为:
body, ul { margin: 0; } ul { padding: 0.5rem; list-style: none; overflow: hidden; } li { float: left; margin: 0.1rem; } .icon { background-image: url('./sprite.jpg" alt="css基线实例详解(移动端使用 rem 单位时 css sprites 定位问题的解决)" border="0" />
效果:
细心留意可以看出,部分地方显示会有大概 1px 的偏差,这是由于不同手机计算偏差导致的,如果 icon 较为简单,可以接受这种效果也没关系,如果对 icon 显示的要求较高,则这种方式很明显不能达到要求;
2、转换为 rem 后通过 百分比进行定位
首先确认 background-position
使用百分比定位的概念:
属性值为百分比时,将以指定的点为重合点摆放雪碧图和显示 icon 的框。 简而言之,假设值为 10% 20%,则是将 sprite 图的 10% 20% 位置的点与显示框 10% 20% 的点重合(并不是 0% 0% 的点)
举个栗子:有一张 200X200 的 sprite 图,和一个 50X50 的 icon 显示框,这时如果设置 background-position: 0% 0%;
效果如下:
如果设置 background-position: 100% 100%;
,会先获取 icon 框 100% 100% 位置的点,和 sprite 图 100% 100% 位置的点,然后将其重合;
效果如下:
由此可知:其百分比定位的效果相当于先将 icon 框左上角的位置定位到 sprite 图 100% 100% 的位置,再往左上方回挪 icon 框 100% 100% 的位置;
这是在我们知道百分比的情况下实现的效果,而拿到 sprite 图的时候,我们往往知道的信息如下:
- 每个 icon 的大小
- sprite 图的大小
- 每个 icon 在 sprite 图中的定位
这时候我们就需要通过已知的条件计算出定位的百分比,这就变成了一道数学题:
已知 icon 宽高都为 50,sprite 宽高都为 200,icon 左上角在 sprite 内的坐标为 (50, 60),计算其 background-position
;
解:因为 background-position 定位的概念为 icon 框和 sprite 图各自指定位置重合;
设:sprite 宽为 W,高为 H,icon 宽为 w,高为 h,icon 在 sprite 中的坐标为 (x,y),得到百分坐标为 (m,n) 故可得到以下公式:
mW-mw=x => m(W-w)=x => m=x/(W-w)*100%
nH-nh=y => n(H-h)=y => n=y/(H-h)*100%
计算可得:
m=50/(200-50)*100%=33.3%
n=60/(200-50)*100%=40%
当然,公式是上面那样,如果写到 css 中,就需要配合 css 的计算方法 calc() 进行计算,如果对 calc 不明确的同学自行百度一下;如果同学使用 scss 或者 less 等 css 预编译器编写样式的就更简单了,直接写一个混入方法就搞定;
3、其他方式
每个小图标使用单张图片,再通过 background-size: cover|100%|contain; 也能完美的显示,但是一个页面的图标多的时候,请求就太多了,浏览器的并发请求数是有限制的,这样会导致网页的加载时间大大加长,不划算;
每个小图标转成 base64 图片,再直接写入代码:
优点:1. 完整显示图标;2. 减少请求数量;
缺点:1. 色彩丰富的图片转成 base64 效果不好;2. 会增大图片提及,相当于用下载时间换取请求时间;
好了,这篇分享就说到这里,初次写文章,语句和方式难免有瑕疵,望各位看客老爷见谅。也希望大家多多支持开心学习网。
- html5定位地理位置(html5 制作地图当前定位箭头的方法示例)
- sql性能优化案例(SQL性能优化之定位网络性能问题的方法DEMO)
- vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)
- mysql字符串截取字段(MySQL如何从不固定位置提取字符串元素详解)
- css中的浮动和定位是啥(CSS的position定位和float浮动详解)
- html5功能讲解(Html5定位终极解决方案)
- linux查询服务重启(Linux上定位后台服务偶发崩溃的解决方法)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- 如何查看mysql慢查询日志(MySQL慢查询如何定位详解)
- pythonselenium怎么设置元素(Python2 Selenium元素定位的实现8种)
- css定位总结(css中的三种基本定位机制)
- pythonselenium查看当前页面元素(python+selenium 定位到元素,无法点击的解决方法)
- css定位属性position的值的含义(css position fixed 左右双定位的实现代码)
- html5单选项怎么调选项间距(html5实现输入框fixed定位在屏幕最底部兼容性)
- html5定位地理位置(Html5获取高德地图定位天气的方法)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- 东南亚安全吗(好不好挣钱)
- 潘长江小品《照亮全家福》台词剧本完整版(潘长江小品照亮全家福台词剧本完整版)
- 一窗通办政务服务小品剧本(一窗通办政务服务小品剧本)
- 刘韬涛丁子贺小品《根治低头族》台词剧本(刘韬涛丁子贺小品根治低头族台词剧本)
- 看完《夺冠》,黄渤的演技我实在夸不起来,彭昱畅反令人惊喜(黄渤的演技我实在夸不起来)
- 黄渤泪目 我的痴呆父亲,我内心永远的痛(黄渤泪目我的痴呆父亲)
热门推荐
- linq not in 查询
- mysql8.0.25安装及配置超详细教程(MySQL8.0.21安装步骤及出现问题解决方案)
- SQLServer中JSON文档型数据的查询问题解决(SQLServer中JSON文档型数据的查询问题解决)
- docker容器使用流程(在Docker构建的容器中实现安装ping工具)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- php时间戳是什么意思(php时间戳转换代码详解)
- 如何用mysql建立图书管理系统(图书管理系统的sqlserver数据库设计示例)
- python取当前日期(Python实现根据日期获取当天凌晨时间戳的方法示例)
- vue树形表格内容太长(VUE 无限层级树形数据结构显示的实现)
- pythonselenium判断网页加载完成(python 实现selenium断言和验证的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9