详解挪动端Html5网页页面中1px边框的几种处理方式

日期:2021-02-23 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

难题提出

这是1个较为老的难题了,我第1次留意到的情况下,是UI设计方案师来找我不便,emmm那时我才初入前端开发职场,啥也不懂啊啊啊啊啊,情况是这样的:

设计方案师拿下手机过来:这些边框都粗了啊,我的设计方案稿上是1px的

我:????我写的是1px呀,不信你看。(说着拿出了css编码

设计方案师:不对啊我双眼来看这个边框比我设计方案稿上粗许多,看起来好奇心怪(emmm果真像素眼

我:那我把它改为0.5px你看看(边说边改了编码

设计方案师1看,点了点头,果真好许多。

后来发现一样的编码在一些安卓系统机上是有难题的,会致使0.5px的线看看不到。

奇了怪了,明显改为0.5px不可以处理难题,可是的确1px边框看上去比设计方案稿上要粗许多,缘故在哪?

1px边框的主要表现

我立即应用css去定1px的边框,

html:

<ul class="hairlines">
  <li>1</li>
  <li>2</li>
</ul>

css:

* {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .hairlines {
      width: 300px;
      margin: 100px auto;
    }
    .hairlines li{
      position: relative;
      margin-top: 10px;
      border-bottom: 1px solid #cccccc; // 边框设定成1px
    }

获得的截图以下:

看上去是比设计方案稿上要粗许多,设计方案稿上的应当是下面这样的,大伙儿能够比对1下:

处理方式1:伪类+transform

抱着处理难题的心理状态,尽管那时候也沒有想清晰缘故在哪儿,可是還是寻找了有关的处理方式,在其中1些方式中提到应用边框照片border-image或box-shadow,还可以仿真模拟出要想的1px边框实际效果,可是我本人感觉堵塞用,也并不是基本处理方式。

最后挑选的是应用伪类+transform方式:基本原理是把本来元素的 border 去掉,随后运用 :before 或 :after 重做 border ,并 transform 的 scale 变小1半,本来的元素相对性精准定位,新做的 border 肯定精准定位。

html同上

css以下:

    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .hairlines {
      width: 300px;
      margin: 100px auto;
    }
    .hairlines li{
      position: relative;
      border:none;
      margin-top: 10px;
    }
    .hairlines li:after{
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      background: #cccccc;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

这样的话,画出的线的确细许多,我在以后长达1年的時间里边1般全是应用上面的方式去处理1px边框的难题,但用着用着,我发现了几个难题:

1.为何是scaleY(0.5)?这个0.5是如何得出的?是否全部机型全是要scale变小到1半,换句话说是否通用性?

2.假如我要另外画1个器皿的4个边框如何办?

3.支不适用圆角边框?

后两个难题更新改造1下上面的编码,能够寻找处理方式(以便便捷查询实际效果,我把平常写法得出的实际效果和应用伪类得出的实际效果放1起,这样更非常容易看出区别):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
  <title>挪动端1px边框难题</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .lines {
      width: 200px;
      margin: 0 auto;
    }
    .lines li {
      border: 1px solid #cccccc;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 13px;
      margin-top: 10px;
    }
    .hairlines {
      width: 200px;
      margin: 0 auto;
      border-radius: 3px;
    }
    .hairlines li{
      height: 50px;
      line-height: 50px;
      border:none;
      text-align: center;
      position: relative;
      margin-top: 10px;
    }
    .hairlines li:after{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      border: 1px solid #cccccc;
      border-radius: 26px;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }
  </style>
</head>
<body>
粗线
<ul class="lines">
  <li>1</li>
  <li>2</li>
</ul>
细线
<ul class="hairlines">
  <li>3</li>
  <li>4</li>
</ul>
</body>
</html>

这样得出的实际效果图以下:

下面的边框显著细许多,更接近于设计方案稿。

那末“1.为何是scaleY(0.5)?这个0.5是如何得出的?是否全部机型全是要scale变小到1半,换句话说是否通用性?”这个难题该如何回应呢?

这就要返回难题的实质,为何我明明在css里边写了1px,可是依然会出現“看起来比平常要粗许多的实际效果”?

查了材料看了下,原先css中设定的像素其实不是跟机器设备的像素点11对应,这便是说,我在css中写明1px,具体在手机上上,看到的有将会其实不是1个像素点占有的宽度。

css的像素是1个抽象性的相对性的定义,在不一样的机器设备和自然环境中,所表明的物理学像素点是不1样的,在较为老的机器设备上,显示屏像素密度较为低,这样,的确1个1px的像素便是1个物理学像素,可是技术性迅猛发展,如今的手机上显示屏全是高辨别率,在规格未转变的状况下,1个显示屏上把填满着更多的像素点,这时候1个css的像素(一般称为逻辑性像素)将对应好几个物理学像素点。

那究竟1个css的像素宽度上对应是多少个物理学像素点呢?

这就要提到devicePixelRatio(机器设备像素比)

devicePixelRatio = 机器设备上物理学像素/单独像素,能够根据window.devicePixelRatio获得,这个像素比正好能够叙述1个css的像素宽度上对应是多少个物理学像素点,实际上便是对应devicePixelRatio个像素点。

当viewport的特性initial-scale为1时,网页页面尺寸一切正常,但initial-scale为0.5时,网页页面被变小了1倍,devicePixelRatio为2的机器设备原本1个CSS像素宽度占2个物理学像素宽度,变小后的1个CSS像素宽度就只占1个物理学像素,即完成了真实的1物理学像素。

处理方式2:rem + viewport

说到这里,处理方式就很明了了:大家能够在运作的情况下拿到机器设备的devicePixelRatio,动态性更改viewport的initial-scale为 1/devicePixelRatio,这样就可以确保1px的宽度便是真实的1物理学像素宽。别的兼容应用rem(由于应用px的话都会被变小)

编码以下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF⑻">
  <!--<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">-->
  <title>挪动端1px边框难题</title>
  <script>
    (function () {
      var clientWidth = window.screen.width;
      var dpr = window.devicePixelRatio;
      var vp = document.createElement('meta');
      document.documentElement.style.fontSize = clientWidth > 414 ? '20px' : 20 * dpr * clientWidth / 360 + 'px';
      vp.name = 'viewport';
      vp.content = `initial-scale=${1.0 * 1 / dpr}, maximum-scale=${1.0 * 1 / dpr}, minimum-scale=${1.0 * 1 / dpr}, user-scalable=no, width=device-width`;
      var m = document.getElementsByTagName('meta')[0];
      m.parentNode.insertBefore(vp, m);
    })();
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .lines {
      width: 10rem;
      margin: 0 auto;
    }
    .lines li {
      border: 1px solid #cccccc;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      border-radius: 0.6rem;
      margin-top: 0.5rem;
    }
  </style>
</head>
<body>
<ul class="lines">
  <li>1</li>
  <li>2</li>
</ul>
</body>
</html>

获得的实际效果能够看下图(手机上上看更显著1些):

从上看来,返回以前的难题,"1.为何是scaleY(0.5)?这个0.5是如何得出的?是否全部机型全是要scale变小到1半,换句话说是否通用性?"实际上其实不1定是0.5,在dpr为3的机器设备上实际上应当是0.3333……,也堵塞用,由于每一个手机上的dpr将会不1样,可是方式1中的0.51般由于最少比1px细,因此也类似能够考虑设计方案师的规定了。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。