小程序1像素的边框不能全部显示

最新推荐文章于 2023-06-01 22:51:29 发布
最新推荐文章于 2023-06-01 22:51:29 发布
阅读量539 收藏
点赞数
分类专栏： # Taro 小程序 css 文章标签： 小程序 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanchengmei/article/details/115165072
版权
小程序 同时被 3 个专栏收录
66 篇文章 1 订阅
订阅专栏
Taro
51 篇文章 0 订阅
订阅专栏
css
4 篇文章 0 订阅
订阅专栏
在Taro 3项目中，遇到一个组件在iPhone X上边框显示异常的问题。原本设定为1px solid #ccc的边框，在真机测试下变为0.5rpx solid #ccc，导致下边框消失。解决方法是在行内直接设置边框样式，确保在iPhone X上正确渲染。
摘要由CSDN通过智能技术生成

在这里插入图片描述
前提：项目框架为taro3， 运用的是vue语法

这个组件的边框是1px solid #ccc, 在小程序开发者工具及一般手机中渲染正常，在iphonex中下边框不显示

原因：真机测验后，发现iphonex的渲染是0.5rpx solid #ccc

解决： 边框样式写在行内

微信小程序｜Flappy Bird 像素鸟
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
12-22 2422
此篇文章主要使用小程序实现Flappy Bird 像素鸟。
微信小程序之1rpx的边框在部分机型上展示不全的问题
haoyanyu_的博客
08-10 1552
最近写小程序的商品列表时，商品卡片里需要展示商品的【优惠券】或者【包邮】标签。 设计稿里，标签的边框是0.5px， 在微信小程序里就是1rpx的宽度。 测试的时候发现在一部iphone6手机上，【包邮】的右边框展示不完整，如下图： 测试数据没有商品图片，忽略忽略，看【包邮】标签就好 ???? 包邮标签的样式写在css里， border: 1rpx solid #FF4444; border-width改成2rpx（即1px）是可以正常展示的，只不过边框变宽了，但是要按照稿子来啊*(审美缺失部的名头可是
微信小程序 （适配小结、移动端1px与选择器权重）
weixin_45343878的博客
08-16 558
WXSS选择器权重与优先级 WXSS优先级与CSS类似，权重如下图所示 权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式 权重案例 适配小结 上节介绍的物理像素与逻辑像素相关概念， 关键词： 物理像素dp （1）物理像素(physical pixel) 物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。 一个设备的物理像素...
小程序一像素边框在安卓显示比较粗解决办法
weixin_43625763的博客
10-23 781
小程序在各个地方都是比较坑的，就拿一像素边框来说，ios显示正常，安卓手机显示大概2像素宽，维护一个小程序时发现祖传的代码是用一像素的图片代替的边框，遂记录一下兼容安卓一像素边框问题的办法。 伪元素:before | :after /* 给class为myBox的view添加一个下边框 */ .myBox{ width: 400rpx; height: 400rpx; position: relative; } div:after{ content: ''; width: 100%; heigh
移动端1像素边框问题
Suk__的博客
02-17 307
在移动端不同设备的dpr(物理像素比)不一样,导致1px的逻辑像素渲染出不同的粗细,比如dpr=3时1个逻辑像素点(1px)=3个物理像素点 这不是我们想要的 我们要在所有不同dpr的设备上显示1px的效果保持一致。
微信小程序1px边框缺失问题解决
weixin_43837268的博客
06-01 523
给元素添加样式：transform: rotateZ(360deg)
小程序图片右侧边缘像素缺失的解决方法（自定义图标适配）
miss_chen888的博客
05-29 3164
1）1张图片适配，通过动态设置image宽高来实现：先在data中用变量表示小图标初始宽高，并绑定到image组件上；再通过wx.getSystemInfo获取屏幕宽度，那么小图标的宽度=原宽*屏宽/设计图宽，长=原长*屏宽/设计图宽，再用this.setData()修改变量。<image class="progress-img" src="../../../imgs/transaction...
微信小程序 （布局适配与物理逻辑像素）
weixin_45343878的博客
08-16 1956
移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等 关键词： 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等 屏幕尺寸 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米 常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等 如何计算手机尺寸？ 知道手机...
小程序物理像素和逻辑像素
xinrenwupen的博客
11-21 850
屏幕尺寸 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等 如何计算手机尺寸？ 知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。 屏幕尺寸 设备尺寸是指设备对角线的长度，单位为英寸（inch），...
微信小程序（布局适配与物理逻辑像素）
weixin_45492145的博客
11-21 439
前言 移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等，本节来详细介绍下 关键词： 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。 屏幕尺寸 华为荣耀7 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5...
微笑小程序 1px边框border
weixin_44769310的博客
09-27 1160
像素基本概念： 参考这篇文章微信小程序----适配小结、移动端1px与选择器权重，里面已经很清楚的描述了像素单位及为什么会出现CSS写的1px，实际上看起来比1px粗。 直接上代码： /* border 1px样式 */ .border_bottom, .border_top, .border_all { position: relative; } .border_top::after { position: absolute; content: ''; width: 100%; l
小程序1rpx边框不完美解决方案
hhkongbai的博客
12-05 1485
小程序1rpx边框不完美解决方案
小程序1rpx，边框不完整或线条太粗
weixin_42317515的博客
03-20 2488
在小程序中使用1rpx时，在边框可能会显示不全。用1px可以解决显示不全的问题，但是真机上线条太粗。 解决方法：利用 css 的 伪元素::after+transfrom进行缩放 .border1::after{ position: absolute; content: ''; border:1px solid #8BAFFF; border-radius...
微信小程序（适配小结、移动端1px与选择器权重）
woshierdanya的博客
08-16 1024
WXSS优先级与CSS类似，权重如下图所示 权重越高越优先。 权重案列： 回顾（关键词）： 物理像素dp （1）物理像素(physical pixel) 物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。 一个设备的物理像素是固定不变的。 屏幕像素密度ppi 屏幕像素密度ppi（pixel per inch） 屏幕像素密度(ppi)是指一个设备...
微信小程序-----适配小结、移动端1px与选择器权重
weixin_44775723的博客
08-17 384
一、WXSS选择器权重与优先级 权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式 <!-- WXSS选择器权重与优先级 --> <view class="qz" id="qzA" >权重问题</view> /* 权重优先级 */ /* 权重1 */ view{ color: red; } /* 权重10 */ .qz...
移动端一像素边框解决方案
大概关于
07-26 224
逻辑像素 如果你太明确逻辑像素是什么，可以先看看这篇介绍 css变量 如果你不太明确 css 变量的用法，可以看看阮一峰老师的教程 @media 如果你不太明确 @media，可以先百度百度 正文 先上码： .border{ border: 1px solid #eee; } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #eee; } } @media scre
为什么会存在 1px 问题？怎么解决？
祈澈菇凉
07-01 374
在项目开发中一直深受 1px 的困扰，移动端展示的样式不是偏粗就是偏细、甚至无法看清。也许大家都尝试过或正在使用着各种解决方案，可是对于物理像素、逻辑像素、设备像素比等概念到底是什么，为什么会产生 1 像素等问题始终是一头雾水。。在进行了一番调研后，发现网上对于一些细节原理描述的都不太清晰。故本文结合了个人的一些理解，重点对其原理及实现进行探讨，希望能对像素相关问题彻底解...
1px 问题解决与事件
weixin_50365835的博客
03-02 305
1 利用位图利用背景图片 background: repeat-x bottom left url(); background-size: 100% 1px; 2使用svg方式 div { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='none' stroke-width='1' stroke='red'
解决移动端1px问题
52.0Hz的博客
01-18 1999
涉及点：after伪类、 border-sizing:border-box属性、 transform:scale(0.5)变形缩放属性； 单条边框 #border_1{ background-color: #e4e4ea; position: relative; } #border_1:after{ content: ''; height: 1px; widt
微信小程序view加边框
最新发布
07-13
要为微信小程序的 view 添加边框，你可以使用 CSS 样式来实现。以下是一个示例代码： ```html <!-- 这里是 view 的内容 --> ``` ```css .border-box { border: 1rpx solid #000; /* 设置边框样式，1rpx 表示 1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Misha韩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值