首先,我们先来了解几个概念。
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。 如:iPhone6上就有750*1334个物理像素颗粒。
物理像素表示每个显示设备的最小的显示像素。
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如:css像素),有时我们也说成是逻辑像素。然后由相关系统转换为物理像素。所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比。
独立设备像素就是我们计算机内的一个像素单位,可以用它来转换成相应的物理像素。
设备像素比(device pixel ratio )简称dpr
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系。它的值可以按如下的公式的得到:
设备像素比(dpr)=物理像素/逻辑像素(px)
如果要体验这个视觉变化可以用谷歌浏览器调成手机模式,观感一下。
怎么设计成0.5px的线
-
1、使用 transform 的 scale 把线条高度缩小一半,新边框就相当于0.5px了。
效果图如下:
-
2、使用backgroud-img里面的线性渐变函数进行操作(linear-gradient)
首先对这个属性进行介绍:
background-image: linear-gradient(渐变颜色)
里面添加颜色,默认是平均分配
如我们随便设置几个颜色。
.div1{
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-image: linear-gradient(red, yellow, blue, green);
}
几个颜色是均分进行渐变的。
对于渐变的方向也是可以改变的,默认是从上到下.
background-image: linear-gradient(to right, red, yellow, blue, green);
background-image: linear-gradient(to top, red, yellow, blue, green);
background-image: linear-gradient(to left, red, yellow, blue, green);
background-image: linear-gradient(to bottom, red, yellow, blue, green);
从左到右的渐变 :从下向上的;从右向左的;从上向下的;
/*0deg = to top -- 从下到上*/
background-image: linear-gradient(0deg, red, yellow, blue, green);
/*基于0度顺时针旋转45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*基于0度逆时针旋转45deg*/
background-image: linear-gradient(-45deg, red, yellow, blue, green);
第一个参数可以写一个角度,0deg表示在自下向上的方向,45deg表示在此基础上进行顺时针旋转,
下面是浏览器效果。
/*设置过渡颜色的起始位置*/
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
background-image: linear-gradient(to right, red 50px, yellow, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, yellow 100px, blue, green);
表示为在多么大的距离开始渐变。
因此,我们可以通过设置盒子的高度为1px,然后进行线性渐变都是50%,一个颜色设置成隐形色。
代码如下:
.div3 {
height: 1px;
margin-top: 20px;
background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
}
-
3、使用meta中的scale设置成0.5即可
这种方法不推荐,因为会影响整个页面的设计。