如何解决 1px 问题？

最新推荐文章于 2025-05-08 06:55:59 发布
最新推荐文章于 2025-05-08 06:55:59 发布
阅读量226 收藏
点赞数 3
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29311189/article/details/143227559
版权

1px 问题指的是:在一些 Retina 屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专 门的属性来描述:

window.devicePixelRatio = 设备的物理像素/css像素

打开 Chrome 浏览器，启动移动端调试模式，在控制台去输出这个 devicePixelRatio 的值。这里选中 iPhone6/7/8 这系列的机型，输 出的结果就是 2:

这就意味着设置的 1px CSS 像素，在这个设备上实际会用 2 个物理 像素单元来进行渲染，所以实际看到的一定会比 1px 粗一些。

思路一:直接写 0.5px

思路二:伪元素先放大后缩小
qq_29311189
关注
关于——解决1px的问题（总结版）
qq_45955475的博客
11-17 1291
解决方案（有以下六种） 0.5px 方案 伪类+transform viewport + rem border-image background-image postcss-write-svg 前言 在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。 本文默认你已经对视口、物理像素、逻辑像素、设备像素比、css像素等移动端基本概念已经了解。 产生原因 设备像素比：dpr=w
最常用的1px解决方案
qq_44812835的博客
11-12 853
为什么会有1px问题 大致来说，首先要了解以下概念 1.主屏幕分辨率 比如iphone4 940*640像素，就是横向个640像素，纵向个960像素，一个像素可以看成一个小方块 2.逻辑像素和物理像素 比如上面所说的主屏幕分辨率就是用的物理像素，逻辑像素就是程序认为屏幕上横纵分别有多少个像素点。 3.屏幕倍率 比如iphone4来说 横向逻辑像素320个，横向物理像素640个，那么这就是一个二倍屏，屏幕倍率(devicePixelRatio)就是2,也就是（逻辑像素于物理像素的比） ...
1px问题
weixin_43837268的博客
05-16 241
<style> .border_bottom { overflow: hidden; position: relative; border: none!important; } .border_bottom:after { content: "."; position: absolute; left: 0; bottom: 0; width: 100%; ...
h5中 画1px 的几种方案
最新发布
Bruce__taotao的博客
05-08 680
在移动端 H5 开发中，由于高分屏（高 DPR）设备上 1px 看起来“很粗”，实现“真正 1px 线”的视觉效果就成了一个经典问题。以下是 H5 中实现1px 线条效果方案编号名称推荐场景方案①scale 缩放法通用分割线，快速易用方案②伪元素 + scale组件封装，支持多边线方案③hairlines 类方案WeUI、Vant 等项目推荐方案④渐变线、艺术线需求方案⑤SVG/Canvas高精度线条或图形组件。
1px问题-详解
smallsnine的博客
06-11 705
当你给一个div这样的css样式后 边框宽度为1px .border height 50px width 50px margin 0 auto background pink margin-top 20px border 1px solid red 在手机发现 哎，怎么有点粗 这就是经典的1px问题，下面贴出我的解决方案。网上栗子很多，可自行寻找 .scale_1px{...
1px像素问题
zhaoyahui的博客
04-16 362
放种兼容性比较好，比较简单的解决办法 使用伪类和transform，进行缩放 .onepx{ position: relative; border-bottom:none; } .onepx:after{ content: ''; position: absolute; bottom: 0; left:0; background: #EAECED; w...
解决移动端1px边框问题的几种方法(5种)
01-19
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位...
详解移动端Html5页面中1px边框的几种解决方法
09-22
这样原本1px的边框在视觉上就能够显示为0.5px的细边框，解决了边框过粗的问题。使用这种方法时，需要注意的是，scaleY中的缩放系数0.5是根据移动设备的DPR（设备像素比）来决定的。例如在Retina屏幕（DPR为2）上，1...
css实现0.5px线条解决移动端兼容问题(推荐)
01-18
【内容】： 1. 利用background-image 渐变样式 2.可以利用scale缩放 3.给伪元素设置边框 ... border: 1px solid #ff0000; } /*1.可以利用利用渐变样式=>实现.5px*/ .a1{ height: 1px; margin-top: 20
移动端 1px 的问题
cvper's world !
04-26 812
pc端你写一个边框 1px ,那就是1px 没什么异常，移动端可能在这个机器上细一点，那个机器上粗一点，这就产生了问题，原因主要是屏幕的类型造成的，原因这里不探讨，只看解决方案：先看看下面这两种方案： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta
移动端1px的问题
甜到酬勤
03-16 291
//HTML部分： //css部分： .class1{ border: 1px solid #ccc; } //css部分 /*移动端正常展示1px的问题 start*/ %border-1px{ display: block; position:absolute; left: 0; width: 100%; content: ' '; } .bor
移动端1px问题
a8725585的博客
11-16 335
在移动端页面中设置边框为1px时，在有的设备中可能会发现边框比1px要粗
1px 问题解决与事件
weixin_50365835的博客
03-02 319
1 利用位图利用背景图片 background: repeat-x bottom left url(); background-size: 100% 1px; 2使用svg方式 div { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='none' stroke-width='1' stroke='red'
1px问题解决方案汇总
云雨之石的博客
06-06 2983
为什么会有1px的问题 首先有一个dpr的概念，dpr也就是设备像素比： dpr = window.devicePixelRatio = 物理像素/逻辑像素。 出现移动端1px问题主要是因为设备的物理像素和逻辑像素不同导致的，不同的设备所拥有的物理像素是不同的，也称硬件像素，在pc上一般dpr=1，但是在移动设备中dpr常常不为1，这也就导致了在移动端上1px展示的看起来比较粗。 解决方案 1、媒体查询和0.5px @media screen and (-webkit-min-device-pixel-ra
移动端1px问题的几种常见解决方案
frontend_frank的博客
04-16 2052
前言在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。...
为什么会存在1px问题？怎么解决？
热门推荐
前端开发博客
06-03 1万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群最近在项目开发中一直深受 1px 的困扰，移动端展示的样式不是偏粗就是偏细、甚至无法看清。也许大家都尝试过或正在使用着各种解决方案，可是对于物理像素、逻辑像素、设备像素比等概念到底是什么，为什么会产生 1 像素等问题始终是一头雾水。。在进行了一番调研后，发现网上对于一些细节原理描述的都不太清晰。故本文结合了个...
前端 如何解决 1px 问题
05-25
在移动端开发中，由于不同设备的像素密度（PPI）不同，1px 线条在不同设备上的显示效果也会不同，有时候会出现模糊或粗细不一的情况，这就是所谓的 1px 问题。 解决 1px 问题的方法有很多，以下列举几种常用的方法： 1. 使用 viewport 的 meta 标签，设置 initial-scale=1，可以让页面按照实际的物理像素大小显示，从而解决 1px 问题。 ```html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ``` 2. 使用 CSS transform 属性，将元素缩放至原来的 0.5 倍，然后再将元素的 border、box-shadow、background-image 等属性放大 2 倍，即可实现 1px 线条的效果。代码如下： ```css .element { position: relative; border: 1px solid transparent; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .element::before { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid #ccc; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } ``` 3. 使用 CSS3 的 border-image 属性，可以将一个图片作为边框，从而实现 1px 线条的效果。代码如下： ```css .element { border-width: 1px; border-style: solid; border-image: url(border.png) 2 2 stretch; } ``` 以上是常用的三种解决 1px 问题的方法，不同的方法适用于不同的场景和需求，开发者可以根据具体情况选择合适的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值