189 8069 5689

如何解决移动端1px边框的问题

这篇文章主要为大家展示了“如何解决移动端1px边框的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决移动端1px边框的问题”这篇文章吧。

创新互联网站建设公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!专注中小微企业官网定制,网站建设、做网站,塑造企业网络形象打造互联网企业效应。

当然了,在这之前先整理了与这些方法相关的知识:物理像素、设备独立像素、设备像素比和viewport。

物理像素、设备独立像素和设备像素比

在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的。在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但在移动端,CSS的1px等于几个物理像素。

物理像素(physical pixel)

物理像素又被称为设备像素、设备物理像素,它是显示器(电脑、手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏,指的是设备以多少物理像素来显示一个CSS像素,也就是说,多倍屏以更多更精细的物理像素点来显示一个CSS像素点,在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素对应的却是4个物理像素(参照下文田字示意图理解)。

设备独立像素(device-independent pixel)

设备独立像素又被称为CSS像素,是我们写CSS时所用的像素,它是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。

设备像素比(device pixel ratio)

设备像素比简称为dpr,定义了物理像素和设备独立像素的对应关系:设备像素比 = 物理像素 / 设备独立像素。

CSS的1px等于几个物理像素,除了和屏幕像素密度dpr有关,还和用户缩放有关系。例如,当用户把页面放大一倍,那么CSS中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,CSS中1px所代表的物理像素也会减少一倍。关于这点,在文章后面的1px细线问题部分还会讲到。

1px细线问题

在上文我们已经知道,CSS像素为1px宽的直线,对应的物理像素是不同的,可能是2px或者3px,而设计师想要的1px宽的直线,其实就是1物理像素宽。

对于CSS而言,可以认为是border: 0.5px;,这是多倍屏下能显示的最小单位。然而,并不是所有手机浏览器都能识别border: 0.5px,有的系统里,0.5px会被当成为0px处理,那么如何1px细线问题呢?

使用border-image实现

根据需求选择图片,然后根据css的border-image属性设置。代码如下:

div
{
 -moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
 -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */
 -o-border-image:url(border.png) 30 30 stretch; /* Opera */
 border-image:url(border.png) 30 30 stretch;
}

优点:可以设置单条、多条表框。缺点:更换颜色和样式麻烦,某些设备上会模糊。

使用background-image实现

background-image 跟border-image的方法一样,你要先准备一张符合你要求的图片。优缺点与border-image一样。

 .background-image-1px {
 background: url(../img/line.png) repeat-x left bottom;
 -webkit-background-size: 100% 1px; background-size: 100% 1px;
}

使用box-shadow模拟边框

 .box-shadow-1px {
   box-shadow: inset 0px -1px 1px -1px #c8c7cc;
 }

优点:代码少,兼容性好。缺点:边框有阴影,颜色变浅。

上面三种方式效果并不是太好

伪元素+transform

构建1个伪元素, border为1px, 再以transform缩放到50%。

/* 设计稿是750,采用1:100的比例,font-size为100*(100vw/750) */
.border-1px {
    position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-1px:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        border-top: 1px solid #D9D9D9;
        color: #D9D9D9;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

优点:可以满足所有场景,且修改灵活。缺点:对于已使用伪类的元素要多层嵌套。

用JS计算rem基准值和viewport缩放值

/* 设计稿是750,采用1:100的比例,font-size为100 * (docEl.clientWidth * dpr / 750) */
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
scale = 1 / dpr;
// 设置viewport,进行缩放,达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性,留作的css hack之用,解决图片模糊问题和1px细线问题
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

用JS根据屏幕尺寸和dpr精确地设置不同屏幕所应有的rem基准值和initial-scale缩放值,这个JS方案已经在完美解决了1px细线问题

以上是“如何解决移动端1px边框的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享名称:如何解决移动端1px边框的问题
转载源于:http://cdxtjz.cn/article/gseeph.html

其他资讯