css解决移动端1像素边框问题

最新推荐文章于 2024-07-24 20:33:48 发布
原创 最新推荐文章于 2024-07-24 20:33:48 发布 · 858 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在高分辨率设备上实现精确0.5像素宽度边框的CSS技巧，通过媒体查询针对设备像素比为2的情况进行特殊样式设定。 
@media (-webkit-min-device-pixel-ratio:2),
  (min-device-pixel-ratio:2) {
  .(边框所在类名) {
      border-width: .5px !important;
    }
  }

 

8种方案解决移动端1px边框的问题
林恒的博客
07-05 1215
css中的1px并不等于移动设备的1px，这是由不同手机由不同像素密度，在window对象中有一个devicePixelRatio属性，他可以反应css中像素与设备的像素比。对于老项目，这种方案比较完美, 原理是把原来的所有边框去掉，通过伪类崇左border,并且transform的scale缩小一半，原先的单挑border样式设置。devicePixelRatio 的官方给的定义为： 设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。
移动端1像素问题
01-23
在一些高清二倍屏的移动端设备中，如果你设置1px的边框，实际上是指1px的css样式大小，而在二倍屏移动设备中显示的是2px的物理像素，所以我们需要引入下面的border.css来解决移动端1px边框问题
css 解决手机端1像素边框问题
霍霍的博客
10-10 434
手机端：1像素边框解决方案 /** * @include border(0 0 0 1px, solid, red, 4px); * @module 背景与边框 * @description 为元素添加边框（包括1px边框） * @method border * @version 2.0.0 * @param {String} $border-width 指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置 <2.0.0>
border.css（移动端1像素问题解决）
qq_44196374的博客
02-23 884
发现：对于不同的移动设备，其物理像素与逻辑像素间存在不同的比例关系。 作用：可以解决1像素边框解决多像素边框问题 下面是border.css样式代码分享 @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, ...
css移动端1像素问题.zip
02-09
在一些高清二倍屏的移动端设备中，如果你设置1px的边框，实际上是指1px的css样式大小，而在二倍屏移动设备中显示的是2px的物理像素，所以我们需要引入下面的border.css来解决移动端1px边框问题
【CSS】1 像素（0.5 像素）问题
最新发布
小秀的博客
07-24 672
造成这个问题的原因是由于⾼分辨率屏幕的像素密度⽐传统的屏幕要⾼，所以在屏幕上显示的⼀个 CSS 像素对应的物理像素个数也会相应地增多，当使⽤ CSS 中的 1px 来设置边框或者细线时，实际上渲染出来的线条在屏幕上会被拆分为多个物理像素，从⽽导致看上去更粗。CSS 中的 1 像素问题指的是在⾼分辨率屏幕上显示的 1 像素边框或者细线在实际显示时会⽐ 1 个物理像素更宽或更粗，从⽽导致边框或者细线看上去⽐预期的更粗或者更宽。背景图 background-image。按照比例呈现 1px。
CSS 像素的问题
知远同学的博客
01-29 330
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!--
精选资源
解决移动端1px边框问题的几种方法(5种)
01-19
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位...
解决移动端1px边框问题的CSS技巧
资源摘要信息:"css移动端1像素问题.zip" 在移动设备的开发中，尤其是在使用高清屏幕（Retina屏幕）的设备上，开发人员常会遇到1像素边框问题。这个问题的根源在于屏幕分辨率的不同。高清屏幕拥有较高的像素密度，也...
移动端常见的1像素问题
MGQDLY的博客
04-05 442
移动端常见的1像素问题1像素问题（移动端适配，设备像素比问题）第一步：单独建一个scss文件，来写重复的样式第二步，然后通过@include放到你需要的地方调用它 1像素问题（移动端适配，设备像素比问题） 原因：不同的设备，不同的像素比（dpr） 第一步：单独建一个scss文件，来写重复的样式 @mixin border_1px($color) { position: relative; //判断...
解决移动端1像素边框
12-14
解决移动端存在的一像素边框问题，可以完美的展示在web端上，通用的方式调用即可
关于“1”像素问题
TyrionJ的博客
11-18 1358
背景 在前端页面开发中，UI会提供@2x，@3x等二倍三倍不同尺寸的图，对于刚刚接触前端或者移动端开发的前端er可能会有些不是太明白。在实际开发中可能还会遇到以下情况：ui提供的网页设计图中一个input框是80px（尺寸为举例），前端er在代码中按照80px高度还原在网页上发现输入框的尺寸太高，这些问题的产生式因为UI和前端er在“像素”这个问题上不同的理解而造成的，下面就详细说说“像素
【CSS】画出宽度为1像素的线或边框
Primice个人空间
11-10 1930
由于多倍的设计图在移动设备上显示时会将设计图进行缩小到视口宽度，而1px的边框没有随着页面进行缩小而导致效果太粗，想要还原设计图1px的显示效果，因此需要一些方法来实现边框宽度小于1px。实现方法很多，下面是个人认为比较好的几种。
移动端实现一像素边框的各种方法
qq_39025670的博客
04-18 555
1.参考了下MUI的实现效果，编写了以下适合自己的解决方案代码 /* 一像素边框 */ .border-bottom, .border-top, .border-left, .border-right, .border-top-add, .border-left-add{ position: relative; } .border-bottom::after, .border-top::...
css伪元素一像素问题,移动端1px问题解决方案
weixin_29544469的博客
08-04 875
这是我第25篇简书。一、产生原因DPR(devicePixelRatio) 设备像素比 = 物理像素 / css像素 ，它是默认缩放为100%的屏幕下，设备像素和css像素的比值。目前比较主流的设备的DPR=2或3，所以：当我们的DPR为2，也就是2倍屏时，当物理像素(设备像素)为1px的时候，我们的css像素应该是0.5px。当DPR=3，物理像素为1px时，css像素应该为1/3px。而一般情...
实现移动端1像素线--stylus
weixin_33955681的博客
11-15 247
1px的边框实现思路： 　给准备加1px的元素相对定位 　给该元素加一个伪元素，给伪元素一个绝对定位 　然后把元素的宽高按照dpr相对应的倍数等比例缩放。（css3中的transfrom：scale（）） 下边用stylus实现移动端的1像素边框： border($border-width = 1px, $border-color = #ccc, $border-style ...
移动端1物理像素的实现
weixin_30387799的博客
08-28 459
一、移动端需要处理1物理像素的原因 　　原因是像素比，在设置了完美视口之后，像素比=物理像素/设备独立像素=物理像素/CSS逻辑像素，从而推导出：物理像素=像素比*CSS逻辑像素；例如，DPR为2的iphone6S，设置高度为1px（CSS逻辑像素），所以占用的物理个数=2*1px=2px，即是说高度为1px的CSS像素在DPR为2的移动设备上，占用了2个物理像素。 二、initia...
css基础之移动端1px问题
lee前端技术站
06-23 961
在了解为什么会出现1px的问题之前先讲解俩个概念： 物理像素：物理像素是每个手机在出场的时候，每个手机的设备像素，也叫硬件像素。 逻辑像素：逻辑像素是css记录的像素。 为什么会出现1px问题（主要是iphone中出现） 其实出现1px的原因还是在于，UI设计师要求的1px是物理像素，而我们开发写的css是逻辑像素，他们是不一样的，存在一个换算比例，通常JavaScript可以通过window.devicePixelRatio来获取，在iPhone上出现边框原因就是因为devicePixelRati
移动端1px像素问题及解决办法
热门推荐
xuexizhe88的博客
06-04 1万+
        在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。一、像素的理解        像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值