关于边框1px

最新推荐文章于 2025-06-14 11:14:06 发布
原创 最新推荐文章于 2025-06-14 11:14:06 发布 · 382 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客主要讲述手机端1像素边框在iPhoneX上遇到的问题。起初简单写边框样式，后改成scaleY写法。经网上查证，是因在devicePixelRatio = 2的retina屏下，1px边框会显示成2px，还提及较灵活的写法并给出参考链接。

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

手机端1像素边框在iphoneX上遇到的问题：

一开始是简单粗暴写了border-bottom:1px solid #e5e5e5;

后面改成了scaleY的写法。

在网上查证了原因是因为1px的边框在devicePixelRatio = 2的retina屏下会显示成2px。

比较灵活的写法是用

 

参考链接：

https://segmentfault.com/a/1190000007604842

http://yaohuitao.com/?p=218

 

1px边框的产生与解决方案总结
_
01-28 1381
原文链接: https://juejin.cn/post/6844903456717668359 在之前的项目中，UI告诉我说我们移动项目中的边框全部都变粗了。原谅我的近视眼，为什么我看不出什么差距了，结果UI把他的设计稿跟我的屏幕截图跟我看，居然真的不一样！！！没有办法，只有在后面的版本中去修改了，但是要改的话，需要知道是为什么。所以查了很多资料，终于搞懂了这个问题，并且总结了几种方法。 造成边框变粗的原因 其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的
不同屏幕分辨率实现 1px 边框
qq_39454432的博客
04-28 638
不同屏幕分辨率实现 1px 边框
1px 边框问题
春雨惊春.
06-21 937
文章目录前言一、方法一：设置单独的元素表示边框步骤：缺点：二、方法二：缩放整体边框步骤：缺点：总结 前言 高清屏幕下 1px 会对应更多个物理像素，所以 1px 宽度的边框看起来会比较粗。解决方法如下： 一、方法一：设置单独的元素表示边框 步骤： 边框使用伪类元素或单独的元素实现 在高清屏幕时，设置缩放 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
移动开发中边框1px的问题
最新发布
转身
06-14 171
适配CSS：需搭配rem或vw单位布局（如设置根字体为document.documentElement.style.fontSize = 100/(750/10)*dpr+'px')在实际移动端开发的过程中，有可能会遇到在安卓和IOS端的1px的边框宽度不一致，在高清屏下，移动端的1px 会很粗.原因：不同的移动设备有不同的像素密度，而1px在不同的移动设备上都等于这个移动设备的1px.原理：通过JS动态调整视口缩放比例，使CSS像素与物理像素1：1对应。原理：通过伪元素创建边框，缩放至物理1px。
1px的border
weixin_34008933的博客
01-16 95
css中是这样写的： div{ border-bottom: 1px solid #dfe5e4; } 但在手机上，像素比不为 1 ，由于 webview 的灰度渲染， border 一般会显示为 2-3px 如何使手机上的 border 也显示为 1px ？ 尝试了 div{ background: url(xxx.png) 0 bottom re...
【移动端】1px边框问题
马云
01-18 424
文章目录什么是1px边框问题？方法一方法二完整代码 什么是1px边框问题？ 高清屏幕下 1px 对应更多的物理像素，所以 1 像素边框看起来比较粗 方法一 边框使用伪类选择器，或者单独的元素实现。例如底部边框 .box2::after{ content:''; height:1px; width:100%; position:absolute; left:0; bottom:0; background:#000; } 在高清屏幕下设置 @me
1px边框问题
Bumphy的博客
04-15 1164
随着终端设备的多种多样，尤其的Retina屏的出现，两倍高清屏，三倍高清屏，css中1px的边框的展示的视觉效果是不一样， 通常的做法，有以下几种： Flexible方案 Flexible方案 原理：借助Javascript来动态地修改mete标签中viewport（视口）的initial-scale（缩放比）的值，然后根据dpr修改html 元素的font-size的值，再使用rem来处理元...
解决移动端1px边框问题的几种方法(5种)
01-19
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位...
css+table 1px边框单元格
10-30
### CSS + Table 1px边框单元格 在网页设计中，使用表格（`<table>`）来布局页面内容是一种常见的做法。为了使表格看起来更加美观、整洁，开发者经常需要为表格添加边框。传统的做法是通过设置表格背景和单元格背景...
详解移动端Html5页面中1px边框的几种解决方法
09-22
由于不同移动设备的像素密度不同，直接使用1px定义的边框在视觉上可能会显得比设计稿中的边框更粗。这主要是因为移动设备中的物理像素和CSS像素的比值不同，导致边框的视觉效果被放大了。 在设计师指出边框过粗的...
8种方案解决移动端1px边框的问题
林恒的博客
07-05 1079
css中的1px并不等于移动设备的1px，这是由不同手机由不同像素密度，在window对象中有一个devicePixelRatio属性，他可以反应css中像素与设备的像素比。对于老项目，这种方案比较完美, 原理是把原来的所有边框去掉，通过伪类崇左border,并且transform的scale缩小一半，原先的单挑border样式设置。devicePixelRatio 的官方给的定义为： 设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。
移动端1px边框
07-22 151
　　布局方面，css有那么几个比较热衷的问题。其中，移动端1px边框问题的讨论不亚于垂直居中。那么移动端1px边框问题是如何产生的呢？由于现在的手机几乎都是retina屏，css设置的1px会被渲染成2px的物理像素（针对像素比等于2的屏幕），因此看起来会比较粗。既然知道了问题的产生原因，那么我们就开始解决。网上有很多种方案，但实际上我们用的时候只能选一种用，所以那么“不靠谱”的就...
实现真正的1px的边框 border
法研鲁迅的个人博客
12-10 7942
实现真正的1px的边框 border问题 解决的问题是1像素的边框在某些移动设备中会显示过粗,主要原因是设备进行了放大,成为了2px; 解决利用媒体查询和min-device-pixel-ratio 实现
1px边框实现方案
聂培志的博客
10-20 211
css .border1px:after { content: ' '; box-sizing: border-box; display: block; position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(.5); transform-origin: l...
实现移动端border-1px
chi1130的博客
07-26 457
@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) } } ...
border使用1px问题
super_xxy的博客
08-13 1137
border边框使用1px会有部分分辨率低的电脑边框线有消失的情况，影响美观 解决办法：将px换成等比例的rem可解决。
CSS绘制1px边框表格
老蔡学代码
09-22 1751
.table{ border-collapse:collapse; } .table th,.table td{ border:#ccc solid 1px; padding:5px 0 5px 15px; }
border最小宽度限制1px
SYYling的专栏
11-24 5209
今天准备用标签来实现分割线， 其原始css如下： border-right:0.01rem solid #fff; width:0; height:0.2rem; display:inline-block; 由于自己实现了跟随屏幕而变化的基准font-size函数，当屏幕宽度为750时body的font-size为100px,所以当屏幕小到一定程度时，body的font-size要小于
移动web 1px边框解决方案
FEE
12-20 524
在移动端web页面开发中，为了使css中使用的尺寸与设计稿一致，通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配，在IOS设备上 flexible.js 会根据设备的分辨率动态的调整 viewport 的 width 和 scale 来达到目的。但是，现在很多的安卓手机也是高分辨率的屏幕，有些1px边框的按钮和列表会显得特别粗，flexible.js 只处理了IOS的手机，
移动端Html5 1px边框精细处理方法解析
设计师期望的1px边框在实际应用中往往显得粗细不一，这可能与像素密度、渲染精度以及CSS渲染机制有关。以下是几种解决移动端1px边框问题的方法： 1. 理解问题的本质： 当你在CSS中直接设置`border: 1px solid #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值