/* 正常屏幕尺寸时 */
.card-container {
display: flex;
justify-content: center;
width: 750rpx;
height: 66.62vh;
flex-grow: 1;
margin-top: 2vh;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
width: 750rpx;
}
/* 屏幕高度小于667px时 */
@media screen and (max-height: 667px){
.card-container {
transform-origin: 50% 25%;
transform: scale(0.906);
display: flex;
justify-content: center;
width: 750rpx;
height: 1000rpx;
margin-top: 5vh;
flex-grow: 1;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
width: 600rpx;
}
出现的问题是： 当我加了@media之后，发现所有手机尺寸的，都按这个样式生效了。
也就是说，相当于 @media screen and (max-height: 667px)这个筛选条件，并没有生效。
是skyline渲染引擎中不支持吗？
如果不支持的话，我应该怎么实现匹配不同屏幕的样式？
media query 暂时还不支持。 可以先这样来做：
在 js 侧获取屏幕尺寸，然后 setData 给 wxml。 可以借助 less / sass 来简化 wxss
<view class="{{ largeScreen ? 'large' : 'small' }}"> <view class="foo"></view> </view> // wxss .large .foo { } .normal .foo { }