这篇文章主要给大家介绍了关于移动端开发1px线的理解与解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

1px线变粗的原因

在做移动端项目时,常常是根据设计图设置元素节点的大小和样式,但是有时候根据设计图写出来的样式还是不如人意,虽然表面上看起来和设计稿是一样的,可是就是没设计稿那种感觉,而且莫名还有一种山寨的气息,UI的时候也常常会觉得分割线或则边框线太粗了,要更细一点,但是一看代码,已经是1px了,为什么看着还是那么粗呢?

要知道问题的原因首先要了解一下几个概念:

(1)物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。 如:iPhone6上就有750*1334个物理像素颗粒。

(2)设备独立像素(density-independent pixel)

广东11选五5设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如:css像素),有时我们也说成是逻辑像素。然后由相关系统转换为物理像素。所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比。

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

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系。它的值可以按如下的公式的得到:

设备像素比(dpr)=物理像素/逻辑像素(px) // 在某一方向上,x方向或者y方向,下图dpr=2

知道了设备像素比,我们就大概知道了1px线变粗的原因。简单来说就是手机屏幕分辨率越来越高了,同样大小的一个手机,它的实际物理像素数更多了。因为不同的移动设备有不同的像素密度,所以我们所写的1px在不同的移动设备上等于这个移动设备的1px。现在做移动端开发时一般都要加上一句话:

<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用多少物理像素来渲染,设置了不同的viewport,当然1px的线条看起来粗细不一致。

1px线变粗的解决方法

伪类 + scale

广东11选五5这种方法的原理就是把原来元素的border去掉,然后用 :before 或者 :after 重做 border ,原先的元素相对定位,新做的 border 绝对,定位使用 transform 的 scale 把线条高度缩小一半,新边框就相当于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变粗的原因就在于一刀切的设置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-1px {

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

}

使用border-image

广东11选五5首先需要自己制作一个0.5像素的线条作为线条背景图片。。代码如下:

p{

    border-width: 0 0 1px 0;

    border-image: imageUrl 2 0 round;

}

利用背景渐变linear-gradient

利用linear-gradient利用背景图片渐变,从有色到,默认方向从上到下,从0deg到50%的地方颜色是边框颜色,然后下边一半颜色就是了。然后设置背景宽度100%,高度是1px,再去掉repeat,所以有颜色的就是0.5px的边框。代码如下:

 

.bg_border {

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

    background-size: 100% 1px;

    background-repeat: no-repeat;

}

总结

广东11选五5以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对爱安网的支持。

最新资讯
华为鲁勇:2020年将是云、AI、5G发生聚变反应的元年

华为鲁勇:2020年将是云

华为官网9日披露,华为中国区总裁鲁勇日前在华为云年度
为适应加州新零工法 Uber调整相关应用功能

为适应加州新零工法 U

据国外媒体报道,Uber在加利福尼亚州对其打车应用进行了
德国启动自动驾驶路段测试

德国启动自动驾驶路段

德国航空航天中心日前发布公报说,它已在德国下萨克森州
“欧洲互联网之父”去世 享年86岁

“欧洲互联网之父”去

据国外媒体报道,被誉为“欧洲互联网之父”的英国计算机
马云的乡村教育事业走进“新时代”

马云的乡村教育事业走

2019乡村教师颁奖典礼在三亚香格里拉酒店的草坪上举行
搜狗地图上线AR实景驾驶导航 未来可能瞄准室内导航

搜狗地图上线AR实景驾

近日搜狗地图发布手机地图AR实景驾驶导航功能,以视觉感
最新文章
推荐一款酷炫闪烁的告警按钮

推荐一款酷炫闪烁的告

今天小编给大家推荐一款酷炫闪烁的告警按钮,非常不错,具
移动端开发1px线的理解与解决办法

移动端开发1px线的理

这篇文章主要给大家介绍了关于移动端开发1px线的理解
前端浏览器字体小于12px的解决办法

前端浏览器字体小于12

这篇文章主要给大家介绍了关于前端浏览器字体小于12px
详解Web前端性能优化详解之资源合并与压缩

详解Web前端性能优化

这篇文章主要介绍了详解Web前端性能优化详解之资源合
element.style内联样式的修改方法教程

element.style内联样

这篇文章主要给大家介绍了关于element.style内联样式
图文实操详解前端处理小图标的那些解决方案

图文实操详解前端处理

在前端日常开发中,小图标是必不可少的,我们该如何高效的