背景
在响应式设计中，一个页面通常需要在不同的设备上展示，如手机、平板、电脑等。为了让页面在各种设备上都能有良好的体验，前端开发人员需要关注各种细节问题。其中，1px 边框问题就是一个令人头疼的难题。
在高 dpi 像素的设备上，如 iPhone X，1px 边框看起来非常细，甚至消失了，给用户带来不好的体验，而在传统设备上，1px 边框则看起来比较粗。为了解决这个问题，前端开发人员需要引入一些技术方案。
技术方案
viewport 缩放
最直接的解决方案是根据当前设备的像素比例，对 viewport 进行缩放，以使得 1px 边框可以有更好的呈现。
----- --------------- ---------------------------- ---------------- ---------------- -----------------
-------
------ -------------------------------- ---
---------------- ------- -
---- -
----- ----
---------- -----------
-
-
--------在上面的代码中，我们通过判断设备的像素比例来判断是否需要进行缩放。当缩放倍数为 0.5 时，设备的 2px 边框就会变成浏览器上的 1px 边框。
这种方法的好处在于对现有代码没有侵入性，但它也有一些不足，如缩放后文本也会变得模糊，对于较大的页面会带来性能问题。
使用 rem 作为单位
使用 rem 作为单位也是一种解决方案。rem 单位表示的是相对于根元素的字号的倍数。在我们的设计中，我们可以为根元素设置一个相对较大的字号，比如 16px，然后用 rem 单位来表示 1px 边框。
---- -
---------- -----
-
--- -
------- --- ----- -----
-
------ -------------------------------- -- --- ----------- ------ -
---- -
---------- -----
-
-这个例子中，我们将根元素的字号设为 16px，然后用 rem 单位来设置 div 的边框宽度。在 iPhone X 这样的设备上，我们可以针对这类设备，将根元素的字号设为 32px，使得 1px 边框更加醒目。
这种方法的好处在于对于不同的设备，我们只需要设置一次根元素的字号即可，代码简洁易懂，缺点是需要注意 rem 这个新的单位，以避免其他排版问题。
使用 viewport units
另一种解决方案是使用 viewport units。viewport units 表示相对于视口宽度或高度的长度值。在我们的例子中，我们可以使用 vw 这个 viewport width 的单位来表示 1px 边框。
--- -
------- --- ----- -----
-
------ -------------------------------- -- --- ----------- ------ -
--- -
------- ----- ----- -----
-
-在这个例子中，我们用 vw 单位来表示 1px 边框。当设备像素比例为 2 时，我们将边框宽度设为 0.5vw，使得在设备上显示出一个真正的 1px 边框。
这种方法的好处在于使用起来比较简单，不需要引入新的单位，缺点在于边框宽度的变化受到视口宽度的影响，同时在宽度非常小的情况下，边框看起来可能会过于细。
总结
1px 边框问题在响应式设计中是一个常见的难题，但是通过技术方案的引入，我们可以比较好地解决这个问题。使用 viewport 缩放是最直接的解决方案，使用 rem 单位和 viewport units 也是可行的解决方案。在实际开发中，我们可以根据情况选择最合适的方法进行边框的处理，以提高用户的体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6491328f48841e9894f3434d