微信小程序中宽度显示为375.2的问题

最新推荐文章于 2024-10-15 11:26:09 发布
最新推荐文章于 2024-10-15 11:26:09 发布
阅读量753 收藏
点赞数
分类专栏： uni/微信小程序 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ag456/article/details/116598647
版权

如图所示，当我们在微信小程序中定义width：100%时，会发现页面上显示宽度为375.2px，不必在意这些细节，这并不影响使用，如果你有强迫症，那就定义宽度等于750rpx即可。

 

似有暗香来
关注
专栏目录
微信小程序尺寸及外边距设置调整技巧
厦门在乎科技
05-21 1万+
微信小程序尺寸已经是当下微信小程序设计最热门的话题，下面将从多方面来谈谈微信小程序尺寸及外边距设置相关的内容。 一：尺寸(Dimension) 一.尺寸属性：允许控制元素的宽和高，还可以设置行间距。 1.height：设置元素的高度。 2.line-height：设置行高。 3.min-height: 最小行高。 4.max-height：最大行高。 5.width：设置元素的宽度。 6.max-width：最大宽度。 7.min-width：最小宽度。 二.取值;auto/数字/百分比。 三.注意点：
微信小程序第二章 开发基础
weixin_75196954的博客
03-08 1090
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。a：onLoad 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx.navigateTo和wx. redirectTo及中的query。b：onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。onReady 页面数据绑定函数。
微信小程序pc端宽高：默认宽高为1024*812，全屏宽高为1920*1032
个人博客
12-05 3207
最近开发调试pc端小程序，想知道默认打开和全屏这两种情况下的小程序宽高，发现了一种方法： 真机运行pc端小程序，点击devTools 在控制台直接打印window对象，可以获取到pc端默认屏幕宽高为1024812，全屏pc端小程序后屏幕宽高为19201032 开发者工具里自定义该大小的设备，用来调试样式
小程序 375分辨率的px 转本机分辨率的px
笔记库
11-29 533
/** * 375分辨率的px转成本机分辨率的px * @param {*} num */ px2px(num) { num = +num var per = 375 / this.data.systemInfo.windowWidth return (num / per).toFixed(5) }, ...
小程序获取屏幕宽度
Acitylion的博客
08-02 5243
https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html 写在app.js里了 随时可以调用 onShow: function (options) { console.log("app-onShow"); let that = th...
微信小程序Button样式表width无法生效
xie_hj的博客
12-16 790
微信小程序内<button>使用class样式时，width会被默认属性覆盖。可以发现写在style内可以生效，但众所周知这不是好的解决方案。可以将class中width属性修改为 .button { width: 100px!important; } 原因推测是微信小程序中wxss文件中class样式优先级低于默认属性，故加`!important`提升优先级。 ...
微信小程序canvas.drawImage完全显示图片问题的解决
10-17
微信小程序中，canvas元素用于实现图形绘制。对于在canvas上使用drawImage方法绘制图片时出现的不完全显示问题，本文将提供相应的解决方案。首先需要了解drawImage方法，这是canvas用于向画布上绘制图像的API。在...
微信小程序按钮点击动画效果的实现
10-16
在微信小程序中，为了提升用户体验，常常需要添加各种交互效果，其中按钮点击动画效果就是一种常见且实用的设计。本文将详细介绍如何在微信小程序中实现一个简单的按钮点击动画效果。 首先，我们要了解微信小程序中...
微信小程序中的尺寸问题
langhuage的博客
11-28 1338
rpx：适应性尺寸
微信小程序开发(笔记)
m0_58575070的博客
06-02 1005
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。如何创建自定义组件?在根目录创建文件夹components文件夹 , 然后在此文件夹中创建文件夹,然后在新创建的文件夹下新建component , 输入文件名后回车,就会自动生成关于其 对应的.js、.wxss、.json、.wxml四个文件;全局引入和局部引入。
小程序高宽满屏
weixin_34327761的博客
12-13 1329
为什么80%的码农都做不了架构师？>>> ...
微信小程序之单位
HeroIsUseless的博客
07-10 888
在CSS中可以使用单位vw "view height"与vh "view height" 这个单位实际上是一个百分比，也就是说，上限是100%，也就是100vw或者100vh，那么这个320，也就是用代码获取的，emmm，用的什么单位呢？代码获取的实际上是px，而在手机选择上同样也显示出了像素占比。 首先，微信小程序使用750rpx固定宽度， 为什么375px是750个像素呢？其实是375px是750个rpx。 每日一个小常识： js数组 长度用.length 添加用push，弹出用po.
微信小程序设计尺寸
最新发布
g470641382的博客
10-15 806
其高度通常在40px到60px之间，图标大小在20px到30px之间，文字大小在14px到20px之间。的屏幕尺寸（375px）作为基准，因为1rpx等于0.5px，即1rpx等于1物理像素。例如，如果设计稿上的元素宽度为375px，那么在微信小程序中应写为750rpx。例如，如果一个元素在设计稿上的宽度为320px，那么在微信小程序中应写为calc(320 / 320 * 750rpx)。单位，规定屏幕宽度为20rem，这意味着1rem等于(750/20)rpx，即37.5rpx。
有关Vue、微信小程序、UniApp中的CSS中的宽度width单位、自适应
番茄Salad
11-22 2551
需要注意的是，在小程序中使用单位时，无需手动转换为实际像素值，小程序会自动根据屏幕密度进行换算。在小程序中设置宽度，无需手动换算为不同屏幕密度下的像素值。在小程序和UniApp开发中，推荐使用rpx单位来设置宽度和其他尺寸相关的样式。rpx单位可以实现在不同屏幕大小下的自适应效果，使页面在不同设备上呈现一致的布局和比例。）：类似于em，但是相对于字体中特定字符的高度或宽度。ex相对于小写字母x的高度，ch相对于数字0的宽度。需要根据具体情况选择合适的单位来设置宽度，以实现所需的效果。
微信小程序开发尺寸规范
m0_61396811的博客
10-03 2677
calc(360 / 360 * 750rpx)
微信小程序设置宽高100%不起作用
小风程序员的博客
01-22 1万+
小程序的启动页图片是要铺满全屏的，我们考虑设置宽高都是100%但是并没有起作用 .start { width: 100%;   height: 100%; } .start swiper {   height: 100%; } .start image {   width: 100%;   height: 100%; } 添加page配置即可
微信小程序
ChLLGeX的博客
06-20 1270
小程序的页面内容包含什么取决于 wxml 中定义的组件. 小程序规定, 在 wxml 中使用微信官方定义的组件 库, 原生 html5 的标签不可用.1. 如果在设置小程序组件的属性时遇到了布尔类型属性, 直接设置true或false, 都将会当做是普通字符 串来处理, 它们都将会被解析为true. 除非设置空字符串"". 但是这么写有点野. 小程序推荐:...
微信小程序分辨率的问题
weixin_30502965的博客
05-31 3668
为何模拟器上iPhone6的分辨率是375而设计图给的是750？ 首先要理解pt和px的区别。pt是逻辑分辨率，只和屏幕物理尺寸相关。如iPhone 3GS和iPhone4/4s 都是3.5寸，所以分辨率都为320X480。 px是物理分辨率，和屏幕尺寸无关。点无大小可言。 pt和px可以理解为一个pt内能包含多少个px。iPhone 3GS和iPhone4/4s相比，逻辑分...
小白学习微信小程序的页面布局和屏幕适配
qq_67153941的博客
05-21 694
通过设置容器元素的grid-template-columns属性为repeat(3, 1fr)，我们将容器元素分成了3列，并且每列的宽度平分剩余空间。微信小程序的页面布局主要使用的是Flex布局，其通过设置flex布局属性来实现不同元素的排列和对齐方式。由于百分比单位是相对于父元素的单位，因此无论在何种屏幕上，元素的尺寸都会根据父元素的尺寸进行适配。二、屏幕适配 屏幕适配是指将页面的布局和元素尺寸根据不同的设备屏幕尺寸进行调整，以保证页面在不同设备上都有良好的显示效果。
小程序 设计尺寸
热门推荐
KAKASHIJUST的专栏
01-22 4万+
做移动app开发都不可避免屏幕的适配，那么小程序里的屏幕怎么适配呢，小程序官网里说规定屏幕宽为750rpx，链接 意思是说不管什么屏幕，宽度都是750rpx，我们设计的时候都已宽为750rpx来设计，那么高度呢？ 显然如果能知道高宽比我们就能知道高度了，高度=750rpx*高宽比 API里提供同步方法wx.getSystemInfoSync() 异步方法wx.getSystemInfo()
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值