uniapp小程序 media-query 适配不同尺寸的屏幕

10月/23日/小程序/浏览 344

CSS 的媒体查询功能一出来,就革命了传统的web页面设计,让响应式设计风靡,并流行至今。


小程序现在也支持媒体查询了。不过和CSS的实现方式有所不同,小程序是通过match-media标签来实现的。


类似于网页开发中使用媒体查询来适配大屏小屏,match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示。


例如在match-media组件中放置一个侧边栏,媒体查询规则设置为宽屏才显示,就可以实现在PC宽屏显示该侧边栏,而在手机窄屏中不显示侧边栏的效果。



代码示例:


<template>
    <view>
        <match-media :min-width="375" :max-width="800" >
            <view>当页面最小宽度 375px, 页面宽度最大 800px 时显示</view>
        </match-media>

        <match-media :min-height="400" :orientation="landscape">
            <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
        </match-media>
    </view>
</template>

发表评论

暂无评论,抢个沙发...

客服 工单