这个我也不知道怎么复现，全部代码提交上来吗
5***@qq.com
- 发布：2023-08-02 18:25
- 更新：2023-08-03 19:50
- 阅读：288
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.8.7
第三方开发者工具版本号： 1.06.2307250
基础库版本号： 这是啥不懂
项目创建方式： HBuilderX
操作步骤：
预期结果：
指导一下原因
指导一下原因
实际结果：
指导一下原因
指导一下原因
bug描述：
css使用rpx.
在内置浏览器里面是正常的，到小程序就变形了。
最基本的那个图片的尺寸是这样的，他居然都变形，不知道是什么原因
.file-icon{
width:64rpx;
height:64rpx;
}
5***@qq.com (作者) - 表姐
``css
body * {
box-sizing: border-box;
flex-shrink: 0;
}
body {
font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
Arial, PingFang SC-Light, Microsoft YaHei;
}
button {
margin: 0;
padding: 0;
border: 1px solid transparent;
outline: none;
background-color: transparent;
}
button:active {
opacity: 0.6;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-wrap{
display: flex;
flex-wrap: wrap;
}
.flex-row {
display: flex;
flex-direction: row;
}
.justify-start {
display: flex;
justify-content: flex-start;
}
.justify-center {
display: flex;
justify-content: center;
}
.justify-end {
display: flex;
justify-content: flex-end;
}
.justify-evenly {
display: flex;
justify-content: space-evenly;
}
.justify-around {
display: flex;
justify-content: space-around;
}
.justify-between {
display: flex;
justify-content: space-between;
}
.align-start {
display: flex;
align-items: flex-start;
}
.align-center {
display: flex;
align-items: center;
}
.align-end {
display: flex;
align-items: flex-end;
}
.page {
background: #FCFFF5;
position: relative;
width: 100vw;
min-height:100vh;
height:auto !important;
padding-bottom:0;
.text-red{
color:#FFB835
}
.ziliao{
width:688rpx;
margin:0 auto;
.filter{
margin-top:20rpx;
.grade{
width: 186rpx;
height: 30rpx;
font-size: 34rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: 500;
color: #0D0D0D;
line-height: 30rpx;
}
.down-icon{
width:24.25rpx;
height:13rpx;
}
.ipt{
width: 428rpx;
height: 74rpx;
background: #F4F7EC;
border-radius: 602rpx 602rpx 602rpx 602rpx;
opacity: 1;
border: 2rpx solid #EBEDE5;
padding:0 122rpx 0 28rpx;
margin-left:30rpx;
}
.placehoder{
height: 26rpx;
font-size: 26rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: #979797;
line-height: 26rpx;
}
.search-btn{
width: 102rpx;
height: 48rpx;
background: #64D39F;
border-radius: 977rpx ;
font-size: 26rpx;
color: #FFFFFF;
line-height: 48rpx;
margin-left:-122rpx;
text-align: center;
}
}
.subject-list{
width:688rpx;
margin-top:32rpx;
overflow-x: scroll;
.item{
height: 30rpx;
font-size: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: #5E5E5E;
line-height: 30rpx;
margin-right:30rpx;
}
.active{
height: 40rpx;
font-size: 38rpx;
font-family: PingFang SC-粗体, PingFang SC;
font-weight: normal;
color: #0D0D0D;
line-height: 40rpx;
border-bottom:8rpx solid #33B267;
}
}
.version{
margin-top:36rpx;
position:relative;
// overflow-x:hidden;
// width:660rpx;
.box1{
width: 189rpx;
height: 68rpx;
background: #F4F7EC;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
border: 2rpx solid #EBEDE5;
margin-right:22rpx;
.down-icon{
width:24.25rpx;
height:13rpx;
margin-left:10rpx;
}
}
.box2{
width: 488rpx;
height: 68rpx;
background: #F4F7EC;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
}
.tag-box{
width:468rpx;
overflow-x: scroll;
.tag{
line-height:48rpx;
padding:0 10rpx;
margin:0 10rpx 0 0 ;
border:1rpx solid rgba(0,0,0,0.08);
border-radius: 15rpx;
color:rgba(0,0,0,0.5)
}
.tag-active{
background: #64D39F;
color:#fff;
}
}
.versionPop{
position:absolute;
width: 189rpx;
top:70rpx;
left:0;
z-index:99;
background: #F4F7EC;
border:2rpx solid #EBEDE5;
border-radius: 10rpx;
padding:20rpx 20rpx;
.item{
margin:5rpx;
padding:10rpx 0;
border-bottom: 1rpx solid rgba(0,0,0,0.08);
}
.active{
color:#33B267
}
}
}
.list{
width:688rpx;
.item{
margin-top:20rpx;
border-bottom:1rpx dashed rgba(0,0,0,0.08);
padding-bottom:20rpx;
.file-icon{
width:64rpx;
height:64rpx;
}
.title-box{
margin:0 30rpx;
width: 600rpx;
.title{
width: 600rpx;
height: 60rpx;
font-size: 22rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: #0D0D0D;
line-height: 30rpx;
overflow: hidden;
.tag{
height: 32rpx;
background: #E1F1FF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
font-size: 22rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: #117DF0;
line-height: 32rpx;
padding:0 10rpx;
margin-right:10rpx;
}
}
}
.download-btn{
width: 84rpx;
height: 42rpx;
background: #33B267;
border-radius: 470rpx 470rpx 470rpx 470rpx;
font-size: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 42rpx;
text-align: center;
}
}
}
}
} // }
爱豆豆 - 办法总比困难多
给你改了一下 index页面的压缩包发在下面了 你替换一下
-
-
5***@qq.com (作者)
white-space: nowrap;
display: inline-block;
flex: 1;
这些平时我都不用的，太高级了，啊啊啊2023-08-04 13:16
