前端

> 为什么存在 1px 问题

移动端的1px问题主要是由于设备的物理像素和逻辑像素的不同所致。在高清显示屏（即设备独立像素比例devicePixelRatio大于1）的设备上，一个CSS像素可能会对应多个设备像素。这就导致了CSS的1px边框在高清屏上显示得比预期更粗。


> 1px

以下是一些主要的解决1px问题的方案：

1. **视口缩放（Viewport Scale）**

   视口缩放的原理是将页面的视口设置为设备宽度的一半或一部分，然后布局以这个新的视口宽度为基准进行。由于视口被缩小，一个CSS像素也就对应了更少的设备像素。

   ```html
   <meta name="viewport" content="width=device-width,initial-scale=.5,maximum-scale=.5,user-scalable=no">
   ```
2. **使用Media Query**

   可以使用CSS的Media Query配合devicePixelRatio设定不同dpr下的边框样式，这样可以确保在不同dpr的设备上边框都看起来只有1px。

   ```css
   @media only screen and (-webkit-device-pixel-ratio: 2) {
     .border {
       border-width: 0.5px;
     }
   }
   ```
3. **使用伪元素 + transform: scaleY(.5)/scaleX(.5)**

   利用伪元素，将元素的边框做一次.5的缩放，使得高清屏下1px边框变细。

   ```css
   .border:after {
     content: '';
     position: absolute;
     bottom: 0;
     background: #000;
     width: 100%;
     height: 1px;
     transform: scaleY(.5);
     -webkit-transform: scaleY(.5);
   }
   ```
4. **使用SVG**

   可以使用SVG矢量图形来实现1px边框。由于SVG是矢量图形，在任何分辨率的屏幕上都会很清晰。

   ```html
   <svg width="100%" height="1" xmlns="http://www.w3.org/2000/svg" version="1.1">
     <line x1="0" y1="0" x2="100%" y2="0" stroke="black" stroke-width=".5"/>
   </svg>
   ```
5. **边框图片（Border Image）**

   `border-image` 属性可以让你使用图像作为边框，你可以自由定义图像如何填充和拉伸。

以上只是其中的一些常用解决方案，每种方法都有其适用范围和局限。在实际开发过程中，需要根据具体的应用情况选择最合适的方案。


为什么有移动端 1px 的问题以及有什么方案可以解决移动端 1px 的问题？