微信小程序（适配小结、移动端1px与选择器权重）

最新推荐文章于 2024-03-10 14:56:10 发布
最新推荐文章于 2024-03-10 14:56:10 发布
阅读量982 收藏 5
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshierdanya/article/details/99684118
版权
本文探讨了移动端开发中遇到的1px像素问题，详细介绍了不同解决方案，如媒体查询、border-image、box-shadow、transform: scale(0.5)以及媒体查询结合transform的方法，并分析了它们的优缺点。同时，文章还回顾了物理像素dp和屏幕像素密度ppi的概念。
摘要由CSDN通过智能技术生成

WXSS优先级与CSS类似，权重如下图所示
在这里插入图片描述
权重越高越优先。
权重案列：
在这里插入图片描述
回顾（关键词）：
在这里插入图片描述
物理像素dp
（1）物理像素(physical pixel)
物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。
一个设备的物理像素是固定不变的。
在这里插入图片描述
屏幕像素密度ppi
屏幕像素密度ppi（pixel per inch）
屏幕像素密度(ppi)是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高。
单位：dpi（Dots Per Inch，每英寸点数）
计算

最低0.47元/天 解锁文章
模特
关注
微信小程序开发中的多端兼容与适配
wx_linying1029的博客
07-06 371
综上所述，通过多端兼容和适配的方式，可以使微信小程序在不同平台和不同设备上都有良好的展示效果。开发人员可以根据具体的需求，采用不同的兼容和适配策略，并使用条件编译指令、弹性布局、弹性单位、缩放模式等技术手段来实现。但不同平台可能对某些组件的样式和功能支持不一样，为了实现多端兼容，可以使用条件编译指令来针对不同平台做组件兼容处理。但不同平台可能对某些API的支持不一样，为了实现多端兼容，可以使用条件编译指令来针对不同平台做API兼容处理。为了实现图片的适配，可以使用图片的mode属性来设置图片的缩放模式。
微信小程序-----适配小结、移动端1px与选择器权重
weixin_44775723的博客
08-17 346
一、WXSS选择器权重与优先级 权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式 <!-- WXSS选择器权重与优先级 --> <view class="qz" id="qzA" >权重问题</view> /* 权重优先级 */ /* 权重1 */ view{ color: red; } /* 权重10 */ .qz...
微信小程序 （适配小结、移动端1px与选择器权重）
weixin_45343878的博客
08-16 534
WXSS选择器权重与优先级 WXSS优先级与CSS类似，权重如下图所示 权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式 权重案例 适配小结 上节介绍的物理像素与逻辑像素相关概念， 关键词： 物理像素dp （1）物理像素(physical pixel) 物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。 一个设备的物理像素...
微信小程序之移动端适配
01-03
一.物理像素 1.屏幕的分辨率 2.设配能控制显示的最小单元，可以把物理像素看成是对应的像素点 二.设备独立像素 & css像素 设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如:css像素，只是在android机中css像素就不叫“css像素”了而是叫“设备独立像素”)，然后由相关系统转换为物理像素 三.dpr比 & DPI & PPI 1.dpr:设备像素比，物理像素/设备独立像素=dpr，一般以iphone6的dpr为准 dpr =2 2.PPI:一英寸显示屏上的像素点个数 3.DPI:最早指的是打印机在单位
微信小程序1px线
一出好剧
04-15 1201
微信小程序1px
微信小程序1px边框缺失问题解决
weixin_43837268的博客
06-01 470
给元素添加样式：transform: rotateZ(360deg)
小程序1rpx，边框不完整或线条太粗
weixin_42317515的博客
03-20 2338
在小程序中使用1rpx时，在边框可能会显示不全。用1px可以解决显示不全的问题，但是真机上线条太粗。 解决方法：利用 css 的 伪元素::after+transfrom进行缩放 .border1::after{ position: absolute; content: ''; border:1px solid #8BAFFF; border-radius...
移动端1px解决方案
CRMEB小程序商城的博客
11-09 1261
在移动端web页面中，1px的问题是一个常见的问题，总结一些解决移动端web的1px方法以及对应API介绍 border-image border-image CSS属性允许在元素的边框上绘制图像 语法 border-image: image-source image-height image-width image-repeat 复制代码 设置1px .border-top { border-width: 1px; border-image: url('xxx') 2 repeat; } 复制代
为什么会存在 1px 问题？怎么解决？
祈澈菇凉
07-01 354
在项目开发中一直深受 1px 的困扰，移动端展示的样式不是偏粗就是偏细、甚至无法看清。也许大家都尝试过或正在使用着各种解决方案，可是对于物理像素、逻辑像素、设备像素比等概念到底是什么，为什么会产生 1 像素等问题始终是一头雾水。。在进行了一番调研后，发现网上对于一些细节原理描述的都不太清晰。故本文结合了个人的一些理解，重点对其原理及实现进行探讨，希望能对像素相关问题彻底解...
1px 问题解决与事件
weixin_50365835的博客
03-02 242
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'
微信小程序之选择器
Java 璐到底
03-20 5076
选择器示例demo： 1.普通选择器2.多列选择器3.时间选择器4.日期选择器5.省市区选择器 源码： wxml <view class="container"> <!--选择器--> <view class="section"> <view class="section__title">普通选择器：（普通数组）</view> <picker bindchange="bind...
微信小程序 选择器
有勇气的牛排博客
04-04 1139
<view class="section"> <picker mode="date" value="{{date}}" start="1980-01-01" end="{{ dates2 }}" bindchange="StartDate"> <view class="picker"> 开始日期: <text style="color:blue;">{{dates1}}</text> </view> </pick
解决移动端1px问题
52.0Hz的博客
01-18 1984
涉及点：after伪类、 border-sizing:border-box属性、 transform:scale(0.5)变形缩放属性； 单条边框 #border_1{ background-color: #e4e4ea; position: relative; } #border_1:after{ content: ''; height: 1px; widt
微信小程序选择器picker的使用（selector 普通选择器）
最新发布
m0_52244931的博客
03-10 3917
从底部弹起的滚动选择器。就是类似于element-ui中的下拉选择器。
1px问题解决方案汇总
云雨之石的博客
06-06 2879
为什么会有1px的问题 首先有一个dpr的概念，dpr也就是设备像素比： dpr = window.devicePixelRatio = 物理像素/逻辑像素。 出现移动端1px问题主要是因为设备的物理像素和逻辑像素不同导致的，不同的设备所拥有的物理像素是不同的，也称硬件像素，在pc上一般dpr=1，但是在移动设备中dpr常常不为1，这也就导致了在移动端上1px展示的看起来比较粗。 解决方案 1、媒体查询和0.5px @media screen and (-webkit-min-device-pixel-ra
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值