前言
我们使用手机App的WebView和浏览器查看网页时,经常能看见那细如发丝的“0.5px”的边框、线条,让整个页面效果看起来更加细致。这里所谓的“0.5px”是如何实现的呢,web页面中最小的单位是1px,“0.5px”已经脱离了web定义的单位标准,如果直接使用“0.5px”那么它其实是以1px像素呈现。我在这里说下所谓的移动端“0.5px”像素实现方法,如果小弟理解的有什么错误,欢迎各位大神指点!!!
实现原理
1px像素如果只显示一半,那是否就是所谓的“0.5px”像素?问题的答案很相近,现在就来揭秘它的实现原理,CSS3提供了一个强大的属性,Gradients渐变,这个属性让前端拥有像设计师一样的能力,不需要PS就能绘制一幅五彩冰纷的彩色图。
CSS3 定义了两种类型的渐变(gradients):
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
我们这里需要用到的是线性渐变(Linear Gradients),如果让一天1px的线条实现上到下两种颜色的渐变,那么这条1px像素细线是否就拥有了2中颜色,如果有一种颜色为透明,那么是不是意味着它实现了所谓的“0.5px”.
devicePixelRatio(密度比)
解释完“0.5px”实现原理,这边需要再次提及devicePixelRatio这个属性,根据移动端屏幕分辨率的不同,每个终端机的屏幕密度比也不一样,“0.5px”需要适配不同密度比的设备它也需要设置不同的适配样式,前几年大部分的安卓机的devicePixelRatio值是2,这几年很多手机越来越注重用户的体验,所以密度比相对有所提高,一部分的安卓机devicePixelRatio值为3,当然苹果手机很早就实现了devicePixelRatio=3。如何获取设备的devicePixelRatio值,大家可以参考我上篇博客检测手机类型、密度比和物理宽高
实现1px边框的渐变
这边先用一行渐变的代码来解释下渐变的原理
- 1
第一个属性:linear 定义渐变的类型 线性渐变
第二个属性:left bottom 定义渐变开始的起始点 左下角向上渐变
第三个属性:left top 定义渐变结束点 左上角像下渐变
第四个属性:color-stop(0.5, transparent) color-stop方法创建色标点。含有两个参数,第一个参数表示渐变点的在整个渐变范围内的位置,以小数表示;第二个参数为颜色,可以使用RGBA的形式表示,这样可以指定颜色的透明度。
上面代码如果使用在1px边框中,那么这1px有一半颜色为透明,一半颜色为红色,这样就构建一条头发丝细的“0.5px”线条。当然上面的代码不足以构建能够使用的“0.5px”像素边框,下面附上一个能够使用的“0.5px”像素的样式。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
上面代码大家可以用一个div标签加上minPx-top样式尝试下,在手机端-webkit-device-pixel-ratio: 2和PC端对比一下,看下线条之间的区别。
总结
头发丝边框已经成为移动端线条的趋势,很多网站为了加强用户体验都使用“0.5px”像素。这次只讲解在密度比为2的手机端实现“0.5px”细如发丝边框的方法,当然大家可以尝试下如何在-webkit-device-pixel-ratio: 3的情况下实现“0.5px”边框。除此之外,可以尝试实现 div上下左右 边框使用组合,“0.5px”圆角边框。