移动端 1px 像素边框问题的解决方案（Border.css）

最新推荐文章于 2021-09-16 14:53:21 发布
转载 最新推荐文章于 2021-09-16 14:53:21 发布 · 135 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.javazxz.com/thread-13008-1-1.html
文章标签：

#vue项目

wangchaoqi1985
关注
8种方案解决移动端1px边框的问题
林恒的博客
07-05 1233
css中的1px并不等于移动设备的1px，这是由不同手机由不同像素密度，在window对象中有一个devicePixelRatio属性，他可以反应css中像素与设备的像素比。对于老项目，这种方案比较完美, 原理是把原来的所有边框去掉，通过伪类崇左border,并且transform的scale缩小一半，原先的单挑border样式设置。devicePixelRatio 的官方给的定义为： 设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。
移动端1px问题解析：解决方案、对比与总结
最新发布
pzhdv的博客
07-17 1357
移动端1px视觉偏差问题源于CSS像素与物理像素的映射差异（DPR）。本文解析了四种主流解决方案：1）CSS伪类+transform缩放（推荐），通过媒体查询适配不同DPR设备；2）viewport动态缩放，使1CSS像素=1物理像素；3）SVG矢量绘制实现精细边框；4）box-shadow模拟简单边框。各方案各有优劣，其中伪类+transform方案兼容性好、样式灵活，是复杂场景首选；viewport缩放适合整站统一规范的新项目。开发者可根据项目需求选择最适合的方案。
移动端实现1px像素边框
Zhencode的博客
07-19 248
<div class="box"></div> .box{ width: 100px; height: 100px; position: relative; } .box::after{ position: absolute; left: -50%; top: -50%; wi..
1px边框问题
qq_45178972的博客
04-06 202
(function () { const maxWidth = 540; //不考虑缩放和dpr const minWidth = 320; let dpr = window.devicePixelRatio || 1; //dpr可能是小数，要化为整数 dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1); function setRem() { //获取html的dom元素 const domEl = document.doc
1px 边框问题
a725584054180726的博客
09-16 200
出现1px边框的原因是：1px使用2dp渲染 IOS8支持0.5px;仅IOS8能用 解决办法sacleY(.5) 例子给li添加1px边框 1 li{ 2 position:relative; 3 color: #ccc; 4 } 5 6 li+li:before{ 7 position: absolute; 8 ...
border.css
03-14
该css样式用于解决移动端1像素边框问题。问题分析：有些手机的屏幕分辨率较高，是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下，显示的并不是1个物理像素，而是2个物理像素。为了解决这个问题，引入border....
精选资源
解决移动端1px边框问题的几种方法(5种)
01-19
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位...
reset.css引入以及1px边框问题的解决方法
09-22
本文将详细讨论`reset.css`的引入以及1px边框问题的解决方案。 一、关于`reset.css` `reset.css`的目的是消除HTML元素之间的样式差异，如字体大小、内边距、外边距等。由于不同的浏览器对这些元素有不同的默认样式...
移动端1px物理像素边框的实现：
weixin_45376220的博客
09-27 543
移动端1px物理像素边框适用于高清屏。设备像素比大于1的。 用伪元素，定位实现1px物理像素边框的显示。 再利用媒体查询去修改设备像素比等于2的，等于3的，进行scaleY缩放。 设备像素比是2的，缩放.5倍，设备像素比是3的，缩放.33倍。 -webkit-min-device-pixel-ratio: 2适用于webkit内核 min-resolution: 2dppx适用于火狐 具体实现代码...
【移动端】1px边框问题
马云
01-18 538
文章目录什么是1px边框问题？方法一方法二完整代码 什么是1px边框问题？ 高清屏幕下 1px 对应更多的物理像素，所以 1 像素边框看起来比较粗 方法一 边框使用伪类选择器，或者单独的元素实现。例如底部边框 .box2::after{ content:''; height:1px; width:100%; position:absolute; left:0; bottom:0; background:#000; } 在高清屏幕下设置 @me
1px边框线问题
qq_40654804的博客
05-06 308
变粗原因 css中的1px并不等于移动设备的1px，因为不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。（devicePixelRatio = 物理像素 / 独立像素。）手机的精度越大，线越粗。 解决办法 媒体查询利用设备像素比缩放，设置小数像素 优点：简单，好理解 缺点：兼容性差，目前之余IOS8+才支持，在IOS7及其以下、安卓系统都是显示0px。 border1px(width = 1px,color = #ccc,s
移动端1px边框问题
A_bad_boy_hahaha的博客
09-16 447
问题原因 目前主流的屏幕DPR=2 （iPhone 678）,或者3 （iPhone 8 Plus）。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的0.5px就好了啊！ 试过了就知道，iOS 8+系统支持，安卓系统不支持。 解决方案 以DPR=2为例，使用scale缩放解决 .border-all-1px { position: rel
高清屏下的1px边框问题
weixin_33979745的博客
11-07 375
基本概念 像素(css pixels) css像素或逻辑像素，单位是px，它是一个相对单位，在不同dpr(devicePixelRatio 设备像素比)设备中，1px代表的物理像素是不同的。 物理像素(device pxels) 显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上...
移动端Retina屏幕1px边框问题
vcxiaohan的博客
12-19 849
起因 设计师给出设计稿上明明是1px的边框在移动端retina屏上显示很粗(2倍屏上显示为2px，3倍屏上显示为3px) 设备像素比 注意 安卓不支持小于1的像素，所以通过设置border-width=0.5px不适用安卓 解决 通过高度为1px的div，再通过scaleY缩小可以实现(不能做圆角，而且做4条边很麻烦，排除) .border-line { he...
1像素边框问题
weixin_43905830的博客
04-22 1170
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。 一、像素的理解 像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更...
HTML+CSS34 1px边框问题的解决方案
多啦的博客
07-11 2925
现象及原因 在移动端开发时，设计图中的1px的边框，如果我们直接在CSS中设置边框的宽度为1px，实际上在设备上显示的并不是1px。这是因为不同的手机有着不同的像素密度，即window.devicePixelRatio属性，它反应的是物理像素与逻辑像素的比值，IPhone6的dpr是2，也就是说，对于IPhone6来说，CSS的1px显示时会显示为2px的像素 当设置为1px的边框时，移动端的显示...
移动端基础知识（像素+1px边框+css长度值）
yushuangyushuang的博客
02-04 862
一、css长度值 vm 和vh的区别 参考文章 “视区”（视窗）所指为浏览器内部的可视区域大小 ，即window.innerWidth/window.innerHeight大小 ，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。 vh：viewpoint heig
移动端1px边框问题解决
yulin009的博客
12-20 757
移动端1px边框问题解决使用小数点（兼容不好）background渐变（不利于扩展）利用伪元素（推荐） 使用小数点（兼容不好） 目前只有ios8以上已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样 .border { border: 1px solid #999 } @m...
解决移动端1px边框问题的CSS技巧
为了使用这个文件来解决1像素问题，我们可能需要在项目中引入border.css文件，并在需要1px边框的元素上应用相应的类名。例如： ```html <div class="border-1px"> ``` 这样，即使在高清屏幕上，我们的边框也会以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值