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

最新推荐文章于 2024-05-08 10:39:07 发布
最新推荐文章于 2024-05-08 10:39:07 发布
阅读量491 收藏
点赞数
分类专栏： # 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 订阅
订阅专栏

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

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

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

解决： 边框样式写在行内

Misha韩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序 （适配小结、移动端1px与选择器权重）
weixin_45343878的博客
08-16 506
WXSS选择器权重与优先级 WXSS优先级与CSS类似，权重如下图所示 权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式 权重案例 适配小结 上节介绍的物理像素与逻辑像素相关概念， 关键词： 物理像素dp （1）物理像素(physical pixel) 物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。 一个设备的物理像素...
移动端1像素边框问题
Suk__的博客
02-17 247
在移动端不同设备的dpr(物理像素比)不一样,导致1px的逻辑像素渲染出不同的粗细,比如dpr=3时1个逻辑像素点(1px)=3个物理像素点 这不是我们想要的 我们要在所有不同dpr的设备上显示1px的效果保持一致。
uniapp微信小程序1rpx border在某些手机机型上边框显示不出来解决方案
最新发布
weixin_42711805的博客
05-08 547
小程序在ios系统中，如果border小于1px的情况下，border就可能显示不全(可能少了上下左右任意一边)只需要加一个::after或::before伪类，使用绝对定位定在原来元素上边就不会产生问题了！
微信小程序1px边框缺失问题解决
weixin_43837268的博客
06-01 432
给元素添加样式：transform: rotateZ(360deg)
小程序图片右侧边缘像素缺失的解决方法（自定义图标适配）
miss_chen888的博客
05-29 3122
1）1张图片适配，通过动态设置image宽高来实现：先在data中用变量表示小图标初始宽高，并绑定到image组件上；再通过wx.getSystemInfo获取屏幕宽度，那么小图标的宽度=原宽*屏宽/设计图宽，长=原长*屏宽/设计图宽，再用this.setData()修改变量。<image class="progress-img" src="../../../imgs/transaction...
小程序1rpx边框不完美解决方案
hhkongbai的博客
12-05 1377
小程序1rpx边框不完美解决方案
微信小程序登录弹窗css
01-17
CSS（层叠样式表）是控制网页元素样式的关键技术，在微信小程序中也不例外。本篇文章将深入探讨如何利用CSS来实现微信小程序中的登录弹窗效果。 首先，我们需要了解微信小程序的开发环境和基本结构。微信开发者工具...
微信小程序web开发者工具.doc
05-06
微信小程序Web开发者工具是专为开发微信小程序设计的一款集成开发环境，它允许开发者在本地进行小程序的编写、预览和调试。这款工具提供了代码编辑、模拟器、真机调试等功能，帮助开发者高效地构建和优化微信小程序...
基于mpvue和bootstrap的微信小程序
08-10
Canvas API是微信小程序提供的一个强大的图形绘制工具，它允许开发者在小程序中进行像素级别的图像处理，例如裁剪、旋转、滤镜等。在这款头像处理小程序中，Canvas API被用来实时处理用户上传的头像图片，实现如添加...
C++开发截屏小程序功能
12-20
这个小程序不仅可以展示截屏区域，还能保存所选区域的图像，是学习GDI绘图和Windows API编程的良好实践项目。在实际开发中，可能还需要处理错误、优化性能以及增加更多高级功能，以满足不同用户的需求。
微信小程序demo：利用canvas绘制折线图
03-15
同时，为了确保在不同设备上都能正确显示，需要适配小程序的屏幕尺寸。 接着，我们需要在对应的`.js`文件中获取到Canvas实例，并初始化绘图环境。使用`wx.createSelectorQuery()`方法查询Canvas元素，然后调用`...
小程序1rpx，边框不完整或线条太粗
weixin_42317515的博客
03-20 2266
在小程序中使用1rpx时，在边框可能会显示不全。用1px可以解决显示不全的问题，但是真机上线条太粗。 解决方法：利用 css 的 伪元素::after+transfrom进行缩放 .border1::after{ position: absolute; content: ''; border:1px solid #8BAFFF; border-radius...
微信小程序（适配小结、移动端1px与选择器权重）
woshierdanya的博客
08-16 969
WXSS优先级与CSS类似，权重如下图所示 权重越高越优先。 权重案列： 回顾（关键词）： 物理像素dp （1）物理像素(physical pixel) 物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。 一个设备的物理像素是固定不变的。 屏幕像素密度ppi 屏幕像素密度ppi（pixel per inch） 屏幕像素密度(ppi)是指一个设备...
微信小程序-----适配小结、移动端1px与选择器权重
weixin_44775723的博客
08-17 302
一、WXSS选择器权重与优先级 权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式 <!-- WXSS选择器权重与优先级 --> <view class="qz" id="qzA" >权重问题</view> /* 权重优先级 */ /* 权重1 */ view{ color: red; } /* 权重10 */ .qz...
移动端一像素边框解决方案
大概关于
07-26 196
逻辑像素 如果你太明确逻辑像素是什么，可以先看看这篇介绍 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 345
在项目开发中一直深受 1px 的困扰，移动端展示的样式不是偏粗就是偏细、甚至无法看清。也许大家都尝试过或正在使用着各种解决方案，可是对于物理像素、逻辑像素、设备像素比等概念到底是什么，为什么会产生 1 像素等问题始终是一头雾水。。在进行了一番调研后，发现网上对于一些细节原理描述的都不太清晰。故本文结合了个人的一些理解，重点对其原理及实现进行探讨，希望能对像素相关问题彻底解...
1px 问题解决与事件
weixin_50365835的博客
03-02 196
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 1967
涉及点：after伪类、 border-sizing:border-box属性、 transform:scale(0.5)变形缩放属性； 单条边框 #border_1{ background-color: #e4e4ea; position: relative; } #border_1:after{ content: ''; height: 1px; widt
1px问题解决方案汇总
云雨之石的博客
06-06 2841
为什么会有1px的问题 首先有一个dpr的概念，dpr也就是设备像素比： dpr = window.devicePixelRatio = 物理像素/逻辑像素。 出现移动端1px问题主要是因为设备的物理像素和逻辑像素不同导致的，不同的设备所拥有的物理像素是不同的，也称硬件像素，在pc上一般dpr=1，但是在移动设备中dpr常常不为1，这也就导致了在移动端上1px展示的看起来比较粗。 解决方案 1、媒体查询和0.5px @media screen and (-webkit-min-device-pixel-ra
微信小程序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、付费专栏及课程。

余额充值