移动端 1px 像素处理

最新推荐文章于 2023-09-11 11:51:45 发布
最新推荐文章于 2023-09-11 11:51:45 发布
阅读量180 收藏 2
点赞数
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58207509/article/details/121723293
版权
本文介绍了在移动端开发中遇到的1px边框问题及其解决办法，详细解析了通过CSS3和伪元素技巧来实现1px边框在Retina屏幕上的细腻显示。文中还提到了一种组件封装的方法，方便在项目中复用。
摘要由CSDN通过智能技术生成

思路来源

6种移动端 1px 解决方案(完整版)_程序员成长指北-CSDN博客前言在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。...https://blog.csdn.net/xgangzai/article/details/107118168

解决原理:把原先元素的border去掉，然后利用:before或者:after重做border，并 transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位。

我做了进一步改进  

组件封装   hairline.scss

// src/assets/styles/hairline.scss

@m
最低0.47元/天 解锁文章
捧鲜花的唐老鸭
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端 1px 像素问题
木木木森林
08-15 116
高清屏幕下 1px 对应更多的物理像素，所以 1 像素边框看起来比较粗，解决方法如下： 边框使用伪类选择器，或者单独的元素实现。例如底部边框 .box2::after { content: ''; height: 1px; width: 100%; position: absolute; left: 0; bottom: 0; background: #000; } 在高清屏幕下设置 @media screen and (-webkit-min-device-pixel-ratio:
解决移动端1像素边框
12-14
解决移动端存在的一像素边框问题，可以完美的展示在web端上，通用的方式调用即可
用react解决1px问题
yezi153的博客
12-01 195
1.创建公共样式 hairLine.scss 核心代码 // src/assets/styles/hairline.scss @mixin scale-hairline-common($color, $top, $right, $bottom, $left) { content: ''; position: absolute; display: block; z-index: 1; top: $top; right: $right; bottom: $bottom..
移动端1px像素边框
wangdan_2013的博客
10-18 520
造成边框变粗的原因其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。 解决边框变粗
移动端1像素的解决方案？
最新发布
M030124的博客
09-11 351
2.使用伪类和transform进行缩放：通过使用CSS的伪类选择器和transform属性，可以将1像素的线条或边框进行缩放，使其在高分辨率屏幕下显示更加细腻。1.使用媒体查询和CSS缩放：通过媒体查询检测设备像素比（device pixel ratio）例如@media query and CSS scaling，然后将1像素的线条或边框进行缩放，使其在高分辨率屏幕下显示更加精细。在移动端开发中，1像素的解决方案通常用于解决在高分辨率屏幕下，线条或边框显示过粗的问题。
移动端1像素问题
01-23
在一些高清二倍屏的移动端设备中，如果你设置1px的边框，实际上是指1px的css样式大小，而在二倍屏移动设备中显示的是2px的物理像素，所以我们需要引入下面的border.css来解决移动端1px边框问题
解决移动端1px边框问题的几种方法(5种)
01-19
在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素。 物理像素(physical pixel) 物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最
吃透移动端 1px的具体用法
11-21
总结来说，移动端1px边框的处理是H5应用开发中一个常见的挑战，通过理解像素与物理像素的区别，以及合理利用CSS技巧和媒体查询，我们可以有效地解决这个问题，确保应用在不同设备上都有良好的视觉效果。
css移动端1像素问题.zip
02-09
在一些高清二倍屏的移动端设备中，如果你设置1px的边框，实际上是指1px的css样式大小，而在二倍屏移动设备中显示的是2px的物理像素，所以我们需要引入下面的border.css来解决移动端1px边框问题
移动端1像素解决方案
m0_65545080的博客
02-08 492
remjs
移动端 1px 像素问题以及解决办法
雷佳佳的博客
06-21 3389
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。 一、为什么会有1px问题 要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] & 逻辑像素[CSS像素]； 物理像素： 移动设备出厂时，不同设备自带的不同像素，也称硬件像素； 逻辑像素： 即css...
移动端实现1px像素边框
Zhencode的博客
07-19 182
<div class="box"></div> .box{ width: 100px; height: 100px; position: relative; } .box::after{ position: absolute; left: -50%; top: -50%; wi..
移动端一像素解决方案
weixin_30437847的博客
10-19 74
@charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-...
移动端一像素问题解决方案
莹儿的博客
07-07 1350
1.为什么会有一像素问题 在移动端分辨率是不相同的,目前来说可以分一倍屏,二倍屏,三倍屏,在不同分辨率上显示的1像素可能会被渲染为2个像素点或者三个像素点,这样严重影响了美观,所以我们要解决一像素问题 2.原生简单写法 html <div> <div class="border"></div> </div> css ::after里面的width:200%;height:200%就是把after元素放大两倍,原来的边框像素还是1px原来的大小,
关于移动端一像素线的解决方案
weixin_30487317的博客
11-02 136
为什么会有一像素线这个问题 　　因为移动端布局我们大家都知道根据不同的手机会有不同的dpr 例如 爱疯6plus就是3 爱疯6就是2 当我们定义1px的时候就会在不同手机里面显示不同的粗细长度，dpr为3的时候就是3px，dpr为2的时候就是2px，具体dpr是什么意思不知道的朋友可以去百度一下。所以这个时候我们就需要解决这个1px像素线的问题 解决办法 　　1、yo3框架的解决办法 　...
移动端一像素四种解决方案
Qian_mos的博客
04-01 4670
移动端的问题 样式reset统一标签样式呈现效果 300ms点击延迟问题 移动端的一像素边框问题 即在移动端的CSS写了1px，实际上显示会比1px粗。 border: solid 1px; 在移动端的HTML的header中添加下述代码，意思是本页面的viewport宽度为设备宽度，初始缩放值和最大缩放值是1，禁止用户缩放。 < meta name=“viewport” content=“...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值