关于“1”像素问题

最新推荐文章于 2025-06-11 22:30:32 发布

原创最新推荐文章于 2025-06-11 22:30:32 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了在不同设备像素比(DPR)下实现精准1像素边框的技术方案，包括使用CSS3的transform属性进行缩放的方法，并通过实例展示了如何根据不同DPR调整transform的scale值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景
在前端页面开发中，UI会提供@2x，@3x等二倍三倍不同尺寸的图，对于刚刚接触前端或者移动端开发的前端er可能会有些不是太明白。在实际开发中可能还会遇到以下情况：ui提供的网页设计图中一个input框是80px（尺寸为举例），前端er在代码中按照80px高度还原在网页上发现输入框的尺寸太高，这些问题的产生式因为UI和前端er在“像素”这个问题上不同的理解而造成的，下面就详细说说“像素”。

像素

设备像素(device pixel):设备像素设是物理概念，指的是设备中使用的物理像素。比如iPhone 5的分辨率640 x 1136px。
CSS像素(css pixel):CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。

比如iPhone 5使用的是Retina视网膜屏幕，dpr为2，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。

DPR
参考文章：设备像素比devicePixelRatio简单介绍
设备像素和css像素之间的换算就用到了DPR（devicePixelRatio）。

结合具体项目来谈谈1像素问题。
在项目开发的过程中，会遇到1像素边框问题，这个1像素主要针对的是移动端DPR不为1的移动设备。

如下图
这里写图片描述

红色的方框为在iphone端显示为1像素的问题，相应代码（stylu）如下：
base.styl

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

mixin.styl

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute 
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: " "

思路：对于不同的DPR利用css3中的transform scal属性进行缩放，为了显示出效果，下面我们将DPR为2的缩放改为5然后再测试设备上看单个底部边框的宽度。
base.styl

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(5)
      transform: scaleY(5)