移动端 1px 像素问题

最新推荐文章于 2023-01-31 11:47:49 发布
最新推荐文章于 2023-01-31 11:47:49 发布
阅读量116 收藏 1
点赞数
分类专栏： 代码 文章标签： css3 html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47021982/article/details/119709036
版权
在高清屏幕上，1px像素边框会显得较粗。为解决这个问题，可以利用CSS3的伪类选择器或者创建单独元素来实现细腻的1像素边框。特别是在高分辨率设备上，通过设置transform:scale(0.5)等缩放技巧，能够确保边框显示为实际的1像素效果。
摘要由CSDN通过智能技术生成

高清屏幕下 1px 对应更多的物理像素，所以 1 像素边框看起来比较粗，解决方法如下：

  1. 边框使用伪类选择器，或者单独的元素实现。例如底部边框
.box2::after {
   
	content: '';
	height: 1px;
	width: 100%;
	position: absolute;
	left: 0;
	bottom
最低0.47元/天 解锁文章
木森林哥哥
关注
专栏目录
web移动端1px像素问题解决方案总结
single15的博客
11-30 731
1px像素问题（解决方法记录） 在web移动端开发中，当我们 css 里写的 1px 的时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比（dpr）去映射到设备上就为 2px，或者 3px，由于每个设备的屏幕尺寸不一样，就导致每个物理像素渲染出来的大小也不同，这样如果在尺寸比较大的设备上，1px 渲染出来的样子相当的粗矿，实现的效果会与UI设计稿的差别比较大，这就是经典的一像素边框问题。 解决方法 1、伪类+transform 使用伪类(:before或:after)结合绝对定位来绘制border
移动端1px像素问题及解决办法
热门推荐
xuexizhe88的博客
06-04 1万+
        在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。一、像素的理解        像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细...
移动端 1px 像素问题及解决办法
想搞全栈的前端
06-02 646
移动端1px变粗的原因 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句 <meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”&gt...
移动端 1px 像素问题以及解决办法
雷佳佳的博客
06-21 3401
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。 一、为什么会有1px问题 要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] & 逻辑像素[CSS像素]； 物理像素： 移动设备出厂时，不同设备自带的不同像素，也称硬件像素； 逻辑像素： 即css...
Web解决移动端1px像素问题
AWDSDF的博客
09-06 203
Web解决移动端1px像素问题,在移动端，如果仅仅使用 css 的 1px 来设置 border ，那可能会出现比较粗的情况。因为，有些手机屏幕的 DPR = 2 （2倍图），即 1px 它会用两个物理像素来显示，就粗了。
移动端1px边框问题
最新发布
xiangxiongfly
01-31 465
在移动端开发中，1px的边框在不同手机上显示粗细不一致，特别是在高清屏下会变的粗一些。 伪类+transform（推荐） viewport+rem
移动端1px像素问题及其解决方案
Maix_Y的博客
12-26 429
原因： 由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了 解决方法： 1.在ios8+中当devicePixelRatio=2的时候使用0.5px p{ border:1px solid #000; } @media (-webkit...
移动端1px像素如何实现
茉莉蜜茶~~~
04-19 640
移动端实现1px
关于移动端 1px 像素问题
weixin_33966365的博客
02-06 74
移动端1px变粗的原因 移动端html的header总会有一句<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">这句话定义了本页面的viewport的宽度为设备宽度...
移动端1px边框的问题
qq_42750608的博客
06-04 202
移动端1px边框的问题
移动端1像素问题
01-23
在一些高清二倍屏的移动端设备中，如果你设置1px的边框，实际上是指1px的css样式大小，而在二倍屏移动设备中显示的是2px的物理像素，所以我们需要引入下面的border.css来解决移动端1px边框问题
解决移动端1px边框问题的几种方法(5种)
01-19
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位...
HTML/CSS 单选框
木木木森林
01-03 2082
HTML/CSS 单选框 代码： <!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="zidingyi"> <meta name="description" content="zidingyi"> <meta charset="UTF-8"> <title>&lt
HTML/CSS 圆形头像
木木木森林
12-31 889
HTML/CSS 圆形头像4 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
查找数组中满足条件的对象里的最后一个键
木木木森林
04-13 649
let arr = [{ a: 1, b: 2 }, { a: 3, b: 4 }, { a: 3, b: 5 }, { a: 3, b: 6 }] // 比如说a的值为3的 function firstGrayIndex(array) { let index = array.reverse().findIndex((item, index) => { // console.log(item); return item.a === 3; }); if (index ===
JS 手写 apply( )
木木木森林
02-22 531
JS 手写 apply( ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JS 手写 call( )
木木木森林
02-22 501
JS 手写 call( ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JS 手写 快排
木木木森林
02-28 484
JS 手写 快排 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> </head> <body> <script>
移动端Html5 1px边框精细处理方法解析
以下是几种解决移动端1px边框问题的方法： 1. 理解问题的本质： 当你在CSS中直接设置`border: 1px solid #cccccc;`时，由于屏幕像素密度差异，1px可能在不同的设备上呈现不同的视觉效果。在高分辨率设备上，1px...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值