移动端1px问题

最新推荐文章于 2023-03-27 09:40:00 发布
原创 最新推荐文章于 2023-03-27 09:40:00 发布 · 416 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#H5 #移动端 #1px

本文介绍了一种在魅族手机自带浏览器上解决border-bottom样式不显示的问题，通过将rem单位替换为px单位，成功实现了样式的正常显示。

项目中有个样式需要设置为：border-bottom:.01rem solid #f6f6f6; 但是在魅族手机自带浏览器上显示不出来。

解决方案：
在元素行内添加样式，使用1px,

<div class="item" style="border-bottom:1px solid #f6f6f6;">
移动端1px问题解析：解决方案、对比与总结
pzhdv的博客
07-17 1215
移动端1px视觉偏差问题源于CSS像素与物理像素的映射差异（DPR）。本文解析了四种主流解决方案：1）CSS伪类+transform缩放（推荐），通过媒体查询适配不同DPR设备；2）viewport动态缩放，使1CSS像素=1物理像素；3）SVG矢量绘制实现精细边框；4）box-shadow模拟简单边框。各方案各有优劣，其中伪类+transform方案兼容性好、样式灵活，是复杂场景首选；viewport缩放适合整站统一规范的新项目。开发者可根据项目需求选择最适合的方案。
8种方案解决移动端1px边框的问题
最新发布
林恒的博客
07-05 1205
css中的1px并不等于移动设备的1px，这是由不同手机由不同像素密度，在window对象中有一个devicePixelRatio属性，他可以反应css中像素与设备的像素比。对于老项目，这种方案比较完美, 原理是把原来的所有边框去掉，通过伪类崇左border,并且transform的scale缩小一半，原先的单挑border样式设置。devicePixelRatio 的官方给的定义为： 设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。
移动端边框1px处理
qq_35254907的博客
09-06 365
.border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px { position: relative; } /*线条颜色 黑色*/ .border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .bo
移动端 1px问题
weixin_38629440的博客
03-27 235
1、概念：设备像素比DPR(devicePixelRatio) DPR = 设备像素 / css像素(某一方向上) 2、什么是1px问题？ 比如：iphone6的屏幕宽度为375px，设计师做的UI一般是750px，所以也就是1：2； 所以设计师在画的1px的边框，在“border-width:1px”上展示为2px，这就是移动端 retina屏 1px问题。 3、如何解决呢？ 解决方案还是挺多...
解决移动端1px边框问题的几种方法(5种)
01-19
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位...
移动端1px问题解决方案
02-15
在移动端开发中，1px 线条问题是一个普遍存在的问题。有以下几种解决方案： 1. 使用 media query 和特殊的 CSS 属性，如 transform 或 border-image 来实现 1px 线条。 2. 在 Retina 屏幕上使用 2px 代替 1px，再...
移动端1px线适配问题-------适配各种编译CSS工具 stylus sass
09-04
移动端1px线适配问题-------适配各种编译CSS工具 stylus sass
移动端1px解决方案
weixin_43294560的博客
12-01 2002
原因: 一般来说,在桌面的浏览器中,设备像素比（dpr）等于1,一个css像素就是代表的一个物理像素。 而在移动端,大多数机型都不是为1,其中iphone的dpr普遍是2和3,那么一个css像素不再是对应一个物理像素,而是2个和3个物理像素。 故css设置1px,实际产生的物理像素会变大,使得1px的效果更大 1、小数值px <body> <div id="main" style="border: 1px solid #000000;"></div> &l
移动端1px解决方案总汇
web前端开发
11-11 473
最近在写移动端 H5 应用，遇到一个值得记录下来的点。现在从它的由来到实现，我们来聊一下移动端 1px，说 1px 不够准确，应该说成 1 物理像素。在讲原理之前，先跟大家说一个概念，...
移动端1px
weixin_33672109的博客
03-05 135
笔记 比较好的方法是才用css伪类加缩放来解决 单条border .shop_select { height: 30px; width: 30px; position: relative; &amp;:after { content: ''; position: absolute; righ...
解决移动端1px问题
52.0Hz的博客
01-18 2049
涉及点：after伪类、 border-sizing:border-box属性、 transform:scale(0.5)变形缩放属性； 单条边框 #border_1{ background-color: #e4e4ea; position: relative; } #border_1:after{ content: ''; height: 1px; widt
1px问题
Jowe940428的博客
06-11 571
为了适配各种屏幕，我们在写代码时一般使用设备独立像素来对页面进行布局。 而在设备像素比大于1的屏幕上，我们写的1px实际上是被多个物理像素渲染，这就会出现1px在有些屏幕上看起来很粗的现象。下面是本人收集到的5个处理方法： 1.border-image 基于media查询判断不同的设备像素比给定不同的border-image： .border-1px{ border-bottom...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值