处■理手机端1px外框最好的方式(强烈推荐)

在手机端开发设计时，常常会碰到在眼底黄斑显示屏中原素外框变粗的难题。文中将陪你讨论外框变粗难题的造成缘故及详细介绍现阶段市面上上最好的处理方式。

1px 外框难题的来历

iPhone iPhone4 初次明确提出了 Retina Display（眼底黄斑显示屏）的定义，在 iPhone4 应用的眼底黄斑显示屏中，把 2x2 个清晰度当 1 个物理学清晰度应用，即便用 2x2 个清晰度显示信息原先 1 个物理学清晰度显示信息的內容，进而让 UI 显示信息更精美清楚，这 2x2 个清晰度称为逻辑性清晰度。像这类清晰度比（清晰度比（即dpr）＝ 物理学清晰度 / 逻辑性清晰度）为 2 的眼底黄斑显示屏也被称作二倍屏，现阶段市面上上也有清晰度比高些的三倍屏、四倍屏。而 CSS 中 1px 指的是物理学清晰度，因而，设定为 1px 的外框在 dpr = 2 的眼底黄斑显示屏中具体占有了 2 个逻辑性清晰度的总宽，这就造成了页面外框变粗的视觉效果感受。

应用 transform 处理

根据设定原素的 box-sizing 为 border-box，随后搭建伪原素，再应用 CSS3 的 transform 放缩，它是现阶段市面上上最受青睐的处理方式。这类方式能够考虑全部的情景，并且改动灵便，唯一的缺点是，针对已应用伪原素的原素要多嵌套循环一个无用原素。实际的完成以下：

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

那样便可以获得 0.5px 的外框。

还能够融合新闻媒体查寻（@media）处理不一样 dpr 值显示屏的外框难题，以下：

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

留意：IOS 系统软件的 safari 访问器不兼容规范的 min-resolution，应用非标准准的 min-device-pixel-ratio。

应用 pixel-border.css 处理

pixel-border.css是一个处理手机端 1px 外框的通用性 CSS 专用工具。应用 transform 的处理方式，唯一几行的源代码，应用起來十分便捷，是现阶段发觉最好的处理方式。

安裝

npm安裝：

npm install pixel-border --save

yarn安裝：

yarn add pixel-border

访问器安裝，提议安裝缩小后的版本号：

<link rel="stylesheet" href="path/to/pixel-border.min.css"><link>

应用

pixel-border 根据原素的 ::before 伪原素应用 transform 放缩为原素设定外框。因而，你可以令其用原生态的 CSS 外框特性为原素设定外框，只必须在原素上加上一个 pixel-border 或 pixel-border="true" 的特性，并设定原素的 border-style 值就可以。以下会建立一个单清晰度外框：

<div pixel-border style="border-style: solid;">单清晰度外框</div>

留意：pixel-border已经为原素的外框设定为固定不动值 1px，因而不必为原素再设定 border-width，而且原素的 box-sizing 值被设定为 border-box，请不必重设为别的种类的值。

设定随意外框：

设定原素某一边的外框时，只能以原素设定 border-top-style、border-bottom-style、border-left-style、border-right-style 在其中一项的值，并设定原素 border-color 的值就可以。以下设定上面外框：

<style>
  .border-top {
    border-top-style: solid;
    border-top-color: red;
  }
</style>

<div class="border-top" pixel-border>上面框</div>

设定圆弧外框：

当必须圆弧外框时，自始至终为 border-radius 设定百分数值。以下：

<style>
  .border-radius {
    width: 100px;
    height: 100px;
    border-style: solid;
    border-color: red;
    border-radius: 10%;
  }
</style>

<div class="border-radius" pixel-border>圆弧外框</div>

到此这篇有关处理手机端1px外框最好的方式的文章内容就详细介绍到这了,大量有关处理手机端1px外框內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！