rem 产生的小数像素问题
由于日常需求以无线居多,所以可以在业务中做一些尝试,如 rem,刚接触这个特性的时候,曾经一度爱不释手,仿佛在无线开发的坎坷路上寻找到一条捷径。然而随着使用范围的扩大,慢慢的发现了一些使用 rem 带来的问题。
rem
关于 rem 这个单位的介绍,在此就不赘述,有兴趣的同学可以阅读一丝的《响应式十日谈第一日:使用 rem 设置文字大小》,文章对 rem 进行了详细的介绍。
用途
在无线开发中,响应式布局尤为重要,先不说屏幕尺寸越来越多样化的 iPhone,单是安卓就有 N 多种尺寸要适配。
在没有使用 rem 之前,想要按照设计师的想法去适配不同 分辨率1 是一件非常难操作的事情。用了 rem 以后,一切简单了许多,你可以用它来设置元素的宽高、间距…,然后针对不同的分辨率计算并设置相对应的根字体大小,然后元素就好像缩放过一样自动适应了当前的分辨率,大大的降低了适配工作量。
Demo:
上图是同一个页面在 Apple iPhone 5 和 Samsung Galaxy S4 两款机器下的效果,可以看出从 320px 宽的 iPhone 5 到 360px 宽的 S4,图片像是等比放大了一样,我们分析下这个原理:
假定2 width=320px 的分辨率下的根字体大小是 32px,由此推算:
width=320px 分辨率下:
根字体大小是 32px,该分辨率下宽 1rem 的元素在浏览器里的真实宽度就是 1 * 32 = 32px;
width=360px 分辨率下:
如果要达到等比放大的效果,宽 1rem 的元素在浏览器里的真实宽度就应该是 32 * (360/320) = 36px,由此得出 width=360px 分辨率下的根字体大小为 36px;
由此可见等比缩放是通过控制根字体大小来实现的,且根字体大小与屏幕宽度成正比。
小数像素
刚才举的例子里面 1rem 在 width=320px 分辨率下的真实尺寸为 32px,在 width=360px 分辨率下的真实尺寸为 36px,均为整数。
如果是 1.75rem 呢?
代表机型 | 浏览器宽 | 对应尺寸 |
---|---|---|
iPhone 4/4s/5/5s | 320px | 56px |
Samsung Note 3, Nexus 5… | 360px | 63px |
iPhone 6 | 375px | 65.625px |
Google Nexus 6 | 412px | 72.1px |
iPhone 6 Plus | 414px | 72.45px |
可以看到部分机型下出现了小数像素,那么浏览器是如何处理小数像素的呢?
如图,第一组每个色块的大小为 1.75rem x 1.75rem,第二组每个色块的大小为 1.85rem x 1.85rem;
先看第一组色块,在 iPhone 6 下,其在浏览器内的渲染尺寸应该是 1.75 * 37.5 = 65.625px;
但真实渲染尺寸却是另外一种情况:有的宽度是 66px,有的却是 65px,而且顺序上毫无规律。
这一结果让我十分疑惑,如果浏览器统一做四舍五入处理,那么所有的色块尺寸也应该是一样的,不会出现部分向上取整,部分向下取整。
思考许久无果,大胆设想了一下:浏览器在渲染时所做的舍入处理只是应用在元素的渲染尺寸上,其真实占据的空间依旧是原始大小。
也就是说如果一个元素尺寸是 0.625px,那么其渲染尺寸应该是 1px,空出的 0.375px 空间由其临近的元素填充;同样道理,如果一个元素尺寸是 0.375px,其渲染尺寸就应该是 0,但是其会占据临近元素 0.375px 的空间。于是就顺着这个思路验证了以下:
- 第一个色块的宽度为 65.625px,根据四舍五入的原则其最终渲染尺寸为 66px,空出的 0.375px 由第二个色块补上;
- 第二个色块向左补进 0.375px,相当于减少了 0.375px,余下 65.25px,根据四舍五入的原则其最终渲染尺寸为 65px,多出的 0.25px 会占用第三个色块的空间;
- 第三个色块被占用了 0.25px,相当于增加了 0.25px,等于 65.875px,根据四舍五入的原则其最终渲染尺寸为 66px,空出的 0.125px 由第四个色块补上;
- 第四个色块向左补进 0.125px,相当于减少了 0.125px,余下 65.5px,根据四舍五入的原则其最终渲染尺寸为 66px,空出的 0.5px 由第五个色块补上;
- 第五个色块向左补进 0.5px,相当于减少了 0.5px,余下 65.125px,根据四舍五入的原则其最终渲染尺寸为 65px,多出 0.125px;
上述验证与浏览器输出结果完全一致,表明浏览器在处理小数像素的时候并不是直接舍入处理的,元素依旧占据着应有的空间,只是在计算元素尺寸的时候做了舍入处理(后来在看到LayoutUnit – WebKit 这篇文档后,也印证了之前的假设)。
你可以参考上述原理对第二组色块进行验证,然后比对结果。
问题
目前遇到最多的问题就是 background-image 的问题,经常会因为小数像素导致背景图被裁掉一部分。
上图是同一组 icon 在不同机型下的效果,可以看出这些 icon 在 iPhone 5 和 Galaxy S4 下或多或少的会被裁掉一部分,原因就是由于小数像素导致的,这点可以从元素的Computed Style 上看出。
解决
如何避免这种问题呢?以下两点建议:
- 使用 iconfont;
- 如需使用 background-image,尽量为背景图设置一定的空白间隙,如图:
小结
小数像素产生的问题不单单只有 background-image,还会有其他尚未遇到的坑,然而在了解了浏览器是如何处理小数像素的原理以后,此类问题就变得很好解决,也非常可控。
转载于:https://www.cnblogs.com/sunshq/p/5123524.html
rem 产生的小数像素问题相关推荐
- 移动Web开发基础-flexible布局方案
概述 前面我们已经已经了解了两种基本的布局方案,移动Web开发基础-百分比+flex布局方案 和 移动Web开发基础-rem布局,其中rem布局方案和我们今天要了解的flexible布局方案是有关系的 ...
- 手机网页css字体,CSS深入浅出-动态REM(手机专用)
动态REM是手机专用的自适应方案 REM的值 1. CSS有很多长度单位 px 像素 em 一个"M"的宽度(一个汉字的宽度) ex 一个"X"的高度 vh(v ...
- rem,em,px,rpx等
1.任意浏览器的默认字体高都是16px.谷歌浏览器显示的最小字体大小是12px. exp:突破谷歌浏览器显示12px限制. (1).<div>文本</div> 文本嵌套块标签, ...
- h5 手机屏幕适配—REM
一.rem.em和px之间的关系 使用rem之前,先得弄清楚rem.em和px之间的关系,特别是每一个单位的使用跟代码块的继承之间的关系: 单位 代码地址 运行后截图 说明 px https: ...
- 移动端web开发——像素的适配
像素和dpr 定义 像素,又称画素,是图像显示的基本单位,译自英文"pixel",pix 是英语单词 picture 的常用简写,加上英语单词"元素" elem ...
- 说说css中pt、px、em、rem都扮演了什么角色
前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...
- 【CSS】物理像素 DP(device pixels)、物理像素比(DPR)、px 逻辑像素(CSS像素)、DPI、PPI 的概念解析 以及1px问题解决方法
物理像素 .物理像素比.物理像素比.px 逻辑像素概念解析 前言 一.前提概念 1.分辨率与物理尺寸关系 目前绝大部分显示器都是基于点阵的 同样的分辨率下,每个小点的尺寸仍然是可以大可以小的 DPI( ...
- 前端rem单位的正确使用姿势(转)
2019独角兽企业重金招聘Python工程师标准>>> 写这篇文章是因为自己被rem这个坑绊过脚,因此特意去研究了下rem这个单位. 简单阐述下px.em.rem之前的关系(其实网上 ...
- rem和em学习笔记及CSS预处理
rem和em学习笔记及CSS预处理 1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如 View Code parent-div中的em-div ...
- css中px、em和rem的区别总结
前言 em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值.浏览器使 ...
最新文章
- 小学三年级上册计算机计划书,小学三年级班主任工作计划书
- 宏基因组合种华山松、云杉专车3天领证
- Paddle内置的网络模型
- 电脑连接到网络显示未连接到服务器未响应,电脑dns服务器未响应怎么办?
- vue怎么自己创建组件并引用_Vue 实现创建全局组件,并且使用Vue.use() 载入方式
- 2019 年百度之星·程序设计大赛 - 初赛一Game HDU 6669 (实现,贪心)
- mysql数据库的体系结构包括什么组件_MySQL数据库的体系结构
- Linux入门笔记——less
- 使用CMake与VS2012编译OpenCV3.3.0版本
- Spring基础系列-参数校验
- mysql的建表语句
- 理解 JMeter 聚合报告(Aggregate Report)
- html2canvas保存网页到手机,利用html2canvas将当前网页保存为图片.
- UDP穿越NAT原理(p2p)
- 「Activiti精品 悟纤出品」开发一个简单的SpringBoot activiti应用 - 第330篇
- 探索ESP8285(1)搭建arduino开发ESP8285环境搭建
- php校园一卡通系统
- 【C#】动态数字时钟和日历
- 谷歌浏览器设置默认Flash
- 第九节 初始模块结构图的设计
热门文章
- 动脑学院_张晨到梅州职业技术学院施工现场调研:强力加快进度,确保项目如期建成...
- h5商城模板_几个常用H5制作软件、网站推荐
- 深度学习框架PyTorch:入门与实践 学习(四)
- 数据类型、变量和数组
- 一道学吧上的题 ^ 题目:不允许重复的实验 - 从数字1、2、3、4、5中随机抽取3次数字(不允许重复)组成一个三位数,则其各位数字之和等于n的概率为________ 输入整数 输出一个小数(保留
- Raki的统计学习方法笔记0x2章:感知机
- (详细带你分析错误):No property 属性名 found for type 类名,总结了其他解决办法
- 小车故障灯亮显示大全_原创案例丨17款迈锐宝XL缺缸故障
- Tp5 写随机数(商品货号)
- [MySQL]触发器