移动端debug-5可恶的1px万能实现方案
Posted 文科生的前端之路
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端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、单线
2、四边形
3、圆角四边形
以上是关于移动端debug-5可恶的1px万能实现方案的主要内容，如果未能解决你的问题，请参考以下文章