【移动端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;
 }
posted @ 2016-06-11 22:21  水乙  阅读(2633)  评论(4编辑  收藏