微信小程序max-width和width及min-width区别

 时间:2026-02-13 21:52:20

1、打开开发者工具,在项目pages文件夹下,新建mypage文件夹,在文件夹内新建mypge页面,并在app.json配置文件将此页面设为第一页面。

微信小程序max-width和width及min-width区别

2、在mypage.wxml中写代码如下

<view class='v1'>

<text>

ssss

</text>

</view>

<view class='v2'>

 nnn

</view>

在mypage.wxss中写代码如下:

.v1{

 min-height: 500rpx;

}

.v2{

}

微信小程序max-width和width及min-width区别

3、保存代码,可以看到左边模拟器第一个view比第二个view高度高出很多,因为设置了最小高度

微信小程序max-width和width及min-width区别

4、修改mypage.wxss文件,代码如下:

.v1{

 min-height: 500rpx;

 height: 800rpx;

}

.v2{

}

5、保存代码效果如下图,当定义了height,第一个view的高度是定义的height了

微信小程序max-width和width及min-width区别

6、修改mypage.wxss代码如下,给第二个view定义最大高度

.v1{

 min-height: 500rpx;

 height: 800rpx;

}

.v2{

 max-height: 10rpx

}

微信小程序max-width和width及min-width区别

7、保存代码,可以看到,第二个view只是一小条,里面的内容已经溢出来,如果同时设置了overflow:hidden就直接隐藏了

微信小程序max-width和width及min-width区别

  • JavaScript如何获取和修改div中style中的值
  • C#创建及引用WebService服务
  • jquery如何使用callback?
  • 神雕侠侣2侠客怎么进化?
  • 在HTML中创建一个视频播放器
  • 热门搜索
    煎豆腐的家常做法 耳石症快速自愈方法 油烟机安装方法 交通标志图片大全 大众途安怎么样 收缩毛孔的方法 破解游戏大全盒 腰肌劳损治疗方法 怎么把头发吹蓬松 海参的家常做法