全国服务热线:4008-888-888

技术知识

挪动端开发设计1px线的了解与处理方法

1px线变粗的缘故

在做挪动端新项目时,经常是依据设计方案图设定元素连接点的尺寸和款式,可是有时依据设计方案图写出来的款式還是比不上人意,尽管表层上看起来和设计方案稿是1样的,但是便是没设计方案稿那种觉得,并且莫名也有1种山寨的气场,UI核查的情况下也经常会感觉切分线或则边框线太粗了,要更细1点,可是1看编码,早已是1px了,为何看着還是那末粗呢?

要了解难题的缘故最先要掌握1下几个定义:

(1)物理学像素(physical pixel)

1个物理学像素是显示信息器(手机上显示屏)上最少的物理学显示信息模块(像素颗粒物),在实际操作系统软件的生产调度下,每个机器设备像素都有自身的色调值和亮度值。 如:iPhone6上就有750*1334个物理学像素颗粒物。

(2)机器设备单独像素(density-independent pixel)

机器设备单独像素(也叫密度不相干像素),能够觉得是测算机座标系统软件中得1个点,这个点意味着1个能够由程序流程应用的虚似像素(例如:css像素),有时大家也说成是逻辑性像素。随后由有关系统软件变换为物理学像素。因此说,物理学像素和机器设备单独像素之间存在着1定的对应关联,这便是接下来要说的机器设备像素比。

(3)机器设备像素比(device pixel ratio )简称dpr

机器设备像素比(简称dpr)界定了物理学像素和机器设备单独像素的对应关联。它的值能够按以下的公式的获得:

机器设备像素比(dpr)=物理学像素/逻辑性像素(px) // 在某1方位上,x方位或y方位,下图dpr=2

了解了机器设备像素比,大家就大约了解了1px线变粗的缘故。简易来讲便是手机上显示屏辨别率愈来愈高了,一样尺寸的1个手机上,它的具体物理学像素数更多了。由于不一样的挪动机器设备有不一样的像素密度,因此大家所写的1px在不一样的挪动机器设备上等于这个挪动机器设备的1px。如今做挪动端开发设计时1般都要再加1句话:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这句话界定了本网页页面的viewport的宽度为机器设备宽度,原始放缩值和最大放缩值都为1,并严禁了客户放缩。

viewport的设定和显示屏物理学辨别率是按占比而并不是同样的,挪动端window目标有个devicePixelRatio特性,它表明机器设备物理学像素和css像素的占比,在retina屏的iphone手机上上,这个值为2或3, css里写的1px长度投射到物理学像素上就有2px或3px。根据设定viewport,能够更改css中的1px用是多少物理学像向来3D渲染,设定了不一样的viewport,自然1px的线条看起来粗细不1致。

1px线变粗的处理方式

伪类 + scale

这类方式的基本原理便是把原先元素的border去掉,随后用 :before 或 :after 重做 border ,本来的元素相对性精准定位,新做的 border 肯定,精准定位应用 transform 的 scale 把线条高宽比变小1半,新边框就非常于0.5px了。编码以下:

.scale{

  position: relative;

  border:none;

}

.scale:after{

  content: '';

  position: absolute;

  bottom: 0;

  background: #000;

  width: 100%;

  height: 1px;

  -webkit-transform: scaleY(0.5);

  transform: scaleY(0.5);

  -webkit-transform-origin: 0 0;

  transform-origin: 0 0;

}

应用flexible.js

前面早已说过1px变粗的缘故就在于1刀切的设定viewport宽度,假如能把viewport宽度设定为具体的机器设备物理学宽度,css里的1px不就等于具体1px长了么。 flexible.js的基本原理便是这样,先获得机器设备放缩比devicePixelRatio,随后依据放缩比来动态性设置viewport的值,这样致使的結果便是不管是哪一个机器设备,1px所表明的始终是1个机器设备像素,即该机器设备的最少像素。

//devicePixelRatio=2时,輸出meta以下

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

//devicePixelRatio=3时,輸出meta以下

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

应用meta viewport操纵

基本原理如上。编码以下:

//1px像素线条

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

//0.5像素线条

<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">

应用box-shadow仿真模拟边框

运用css 对黑影解决的方法完成0.5px的实际效果。编码以下:

.box-shadow⑴px {

  box-shadow: inset 0px ⑴px 1px ⑴px #c8c7cc;

}

应用border-image

最先必须自身制做1个0.5像素的线条做为线条情况照片。。编码以下:

p{

    border-width: 0 0 1px 0;

    border-image: imageUrl 2 0 round;

}

运用情况渐变色linear-gradient

运用linear-gradient运用情况照片渐变色,从有色到全透明,默认设置方位从上到下,从0deg到50%的地区色调是边框色调,随后下边1半色调便是全透明了。随后设定情况宽度100%,高宽比是1px,再去掉repeat,因此有色调的便是0.5px的边框。编码以下:

 

.bg_border {

    background-image: linear-gradient(0deg,black 50%,transparent 50%);

    background-size: 100% 1px;

    background-repeat: no-repeat;

}

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,感谢大伙儿对脚本制作之家的适用。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服