【移动端debug-5】可恶的1px万能实现方案

最近和设计同学调ui，遇到的是一位对1px有极致追求的同学，像素眼一眼看出我写的是不是1px，所以让我好好地研究了一番1px到底怎么写最方便。

 

一、为什么出不来1px？

简而言之：css的1px只是一个抽象的单位，并非实际设备中的1px。

关于retina屏：

我们知道现在iphone大多数型号都用上了retina屏，而retina屏的分辨率相较于普通屏幕增加了一倍，也就是说原来1个像素宽度的区域内可以塞进2个像素了。我们css写的1px是一个概念像素，在retina屏的实际设备上占了2px的位置。

而对于手机屏幕整体来说，一个标注了750宽的手机（iPhone6）在css中只需要375px就能表示。

 

二、如何在手机上写出1px？

网上其实有人列了非常多的方案，有用transform的、有用图片的、有用canvas的、还有用0.5px的……从操作简易性来看，用transform的方案是比较简单的，而且适配也比较容易（0.5px的方案安卓不支持）。

原理：写一条1px的线，然后transform:scaleY(0.5)或scaleX(0.5)，就能够将retina上显示的2px缩小为实际屏幕中的1px。

 

三、几种1px的样式实践方案

1、单线

思路：写一个height为1px的元素，然后通过transform:scaleY(0.5)来缩放实现

示例：https://jsfiddle.net/xhabhyf9/2/

.single-line{
  margin:0 auto;
  height: 1px;
  width:200px;
  background: #000;
  overflow: hidden;
  transform: scaleY(0.5);
  -webkit-transform: scaleY(0.5);
  }

（此处加的一句overflow: hidden有奇效，能使得1px真正实现，如果不加这句会有部分颜色溢出，手机上看起来会比1px粗。但是我查了半天没查到是什么原因，还望有高人指点指点，感激不尽。）

 

2、四边形&圆角四边形

思路：假定需求是给width为200px、height为100px的矩形画1px的描边。则写css时，元素宽高增加1倍，然后给元素写1px的border，再通过transform:scale(0.5)来整体缩放实现。（如果有圆角，圆角的弧度也要放大2倍，即需求是4px，css则写成8px）

示例：https://jsfiddle.net/xhabhyf9/3/

.rectangle{
  height: 200px;
  width:400px;
  background: #f0f0f0;
  border:1px solid #000;
  border-radius:8px;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  }

 

3、文字容器的描边

大多数情况下，我们希望文字框的描边随着文字的字数而变化，倘若我们直接在2的例子中的子元素(class="rectangle")里添加文字，则无法实现文字按照父级元素的宽度来排列文字。比如这样：https://jsfiddle.net/xhabhyf9/5/，文字框缩小成了父级元素的50%，无法实现充满父级元素的效果。

思路：给文字框加一层标签，给这层标签元素描边1px，然后给它的外层元素设置为width:200%并transform:scale(0.5)，并且用translate让外层元素由于缩放scale带来的位移“归位”

示例：https://jsfiddle.net/xhabhyf9/7/

.rectangle{
  background: #f0f0f0;
  width:200%;
  transform: scale(0.5) translate(-50%,-50%);
  -webkit-transform: scale(0.5) translate(-50%,-50%);
  }
 span{
  display:inline-block;
  font-size:24px;
  border:1px solid #000;
  border-radius:8px;
 }