微信小程序图片宽高自适应
[ 2022-12-12 16:35:24 | 作者: admin ]
第一、图片高度自适应
微信小程序<image>有默认的宽高width:320rpx;height:240rpx;只设置width：100%是无效的，即使写了height：100%，依然无效。
只要在<image>标签添加mode="widthFix"属性，就可以做到高度自适应，
第二、宽度100%：发现在模拟器上显示一切正常，但是到了手机上右侧会空出一点空白边。
解决：
上面的screenWidth...
阅读全文…
微信小程序<image>有默认的宽高width:320rpx;height:240rpx;只设置width：100%是无效的，即使写了height：100%，依然无效。
只要在<image>标签添加mode="widthFix"属性，就可以做到高度自适应，
<image src="{{carouselpic}}" mode="widthFix" style="width:100%" />
第二、宽度100%：发现在模拟器上显示一切正常，但是到了手机上右侧会空出一点空白边。
解决：
<image src="{{carouselpic}}" mode="widthFix" style="width:{{screenWidth}}px" />
上面的screenWidth...
阅读全文…
微信小程序布局中的单位及使用：px、rem、rpx、vw、vh、n%
[ 2022-12-12 15:59:44 | 作者: admin ]
px：就是 Pixel 的缩写，就是指像素，图片采样的基本单位。
rem：把页面按比例分割达到自适应的效果。规定屏幕宽度为 20 rem，根据屏幕大小动态的设置 fontsize，来达到不同的分辨率下有一样的效果。
rpx：这个单位是微信小程序中特有的尺寸单位，也是把页面按比例分割达到自适应的效果。规定屏幕宽为750rpx，就是把屏幕宽度分成750部分，根据屏幕宽度进行自适应。可与 rem 换算：1 rem = (750/20) rpx =37.5 rpx
如在 iPhone6 上，屏幕宽度逻辑像素为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。所以开发微信小程序时用 iPhone6 作为视觉稿的标准,单位换算相对简单 。
vw：视窗宽度，1vw等于视窗宽度的1%。
...
阅读全文…
rem：把页面按比例分割达到自适应的效果。规定屏幕宽度为 20 rem，根据屏幕大小动态的设置 fontsize，来达到不同的分辨率下有一样的效果。
rpx：这个单位是微信小程序中特有的尺寸单位，也是把页面按比例分割达到自适应的效果。规定屏幕宽为750rpx，就是把屏幕宽度分成750部分，根据屏幕宽度进行自适应。可与 rem 换算：1 rem = (750/20) rpx =37.5 rpx
如在 iPhone6 上，屏幕宽度逻辑像素为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。所以开发微信小程序时用 iPhone6 作为视觉稿的标准,单位换算相对简单 。
vw：视窗宽度，1vw等于视窗宽度的1%。
...
阅读全文…
1
