移动端开发笔记

移动端开发笔记(更新中)

css样式

1.display：flex弹性窗口

image-20240914143820145

轮播图

swiper 组件

circular :indicator-dots 冒号后边表示这是个变量

rpx和upx的区别

  • upx： upx是uni-app中的长度单位，它代表设备独立像素（与屏幕密度无关），1upx等于设备上的1个物理像素。在不同分辨率和屏幕尺寸的设备上，upx会自动转换为适应当前屏幕的最佳物理像素值，帮助开发者实现跨设备的一致性布局。
  • rpx： rpx是微信小程序中使用的长度单位，全称为responsive pixel（响应式像素）。同样地，1rpx也代表设备独立像素，在不同分辨率的手机屏幕上能够根据屏幕宽度进行自适应调整。它的设计目的是让开发者可以基于屏幕宽度进行适配，以达到更好的响应式效果。

总结来说，upx和rpx都是为了简化多设备、多屏幕尺寸下的开发工作而提出的相对单位，它们都致力于提供一种跨设备兼容的、与屏幕物理像素无关的布局方式。在uni-app中，你可以使用upx来替代rpx，二者的作用相似。

upx：相对像素（屏幕基准宽度750upx）早期uni-app提供的响应式布局对策；

px：绝对像素；

rpx：微信小程序定义的相对像素（屏幕基准宽度750rpx）,uniapp支持rpx；

注意：uni-app动态绑定的style不支持直接使用upx。

看了很多篇文章，但是还是觉得很抽象，觉得rpx和upx没有什么显眼的区别，先放放看吧

学习过程中的小问题

轮播图

今天将轮播图的大小从 700 315 改为1260 700之后，页面上显示的图片很奇怪，是这样的

image-20240925121029096

这是我的代码

.banner-image {
		width:1260rpx;  
		height:700rpx; 
	}

然后呢，我就把width改为了100%

就变好了一点

image-20240925121100047

此时我的代码是这样的

.banner-image {
		width:100%;  
		height:700rpx; 
	}

只不过height的数字部分怎么改，对效果的改变不大。应该是因为width将图片等比例放大了。

后来我改了一下分辨率

.banner-image {
		width:630rpx;  
		height:350rpx; 
	}

image-20240925121126216

图片显示全了，但是并不能完全覆盖。但是咱知道怎么整这个大小了哈哈哈