手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

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

时间:2024-10-11 22:19:30

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

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

2、在mypage.wxml中写代码如下<view class='v1&拭貉强跳#39;><text>ssss</text></v足毂忍珩iew><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区别
© 手抄报圈