Skip to content

U
uni-app

genary / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 db2627be 编写于 作者: inkwalk's avatar inkwalk
浏览文件
操作

docs: add match-media.md

上级 76d7230a
隐藏空白更改
内联 并排
Showing with 120 addition and 83 deletion
docs/component/_sidebar.md
浏览文件 @ db2627be
......@@ -6,6 +6,7 @@
* [movable-view](component/movable-view.md?id=movable-view)
* [cover-view](/component/cover-view?id=cover-view)
* [cover-image](/component/cover-view?id=cover-image)
* [match-media](/component/match-media.md)
* 基础内容
* [icon](component/icon.md)
* [text](component/text.md)
......@@ -88,86 +89,86 @@
* [配置小程序插件](component/mp-weixin-plugin.md)
* [原生组件说明](component/native-component.md)
<li></li>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/uniad-520.png" width="20" height="20"/>
<div class="contact-smg">
<div>uniAD</div>
</div>
</a>
<a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-tongji-icon.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库：<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a>、<a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群16：719211033 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0SG97jRMTnKLEqkK2qIO7mfxia2zwJoA&jump_from=webapi">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
<div>群32：166188631（2000人已满）</div>
<div>群31：567471669（2000人已满）</div>
<div>群30：371046920（2000人已满）</div>
<div>群29：202965481（2000人已满）</div>
<div>群28：166188776（2000人已满）</div>
<div>群27：811363410（2000人已满）</div>
<div>群26：147867597（2000人已满）</div>
<div>群25：165297000（2000人已满）</div>
<div>群24：672494800（2000人已满）</div>
<div>群23：599958679（2000人已满）</div>
<div>群22：687186952（2000人已满）</div>
<div>群21：717019120（2000人已满）</div>
<div>群20：165796402（2000人已满）</div>
<div>群19：165657124（2000人已满）</div>
<div>群18：698592271（2000人已满）</div>
<div>群17：951348804（2000人已满）</div>
<!-- <div>群16：719211033（2000人已满）</div> -->
<div>群15：516984120（2000人已满）</div>
<div>群14：465953250（2000人已满）</div>
<div>群13：699478442（2000人已满）</div>
<div>群12：884860657（2000人已满）</div>
<div>群11：296811328（2000人已满）</div>
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（2000人已满）</div>
<div>群8：695442854（2000人已满）</div>
<div>群7：942061423（2000人已满）</div>
<div>群6：697264024（2000人已满）</div>
<div>群5：731951419（2000人已满）</div>
<div>群4：942702595（2000人已满）</div>
<div>群3：773794803（2000人已满） </div>
<div>群2：901474938（2000人已满） </div>
<div>群1：531031261（2000人已满）</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
<div class="contact-box">
<a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/cloud%402x.jpg" width="20" height="20"/>
<div class="contact-smg">
<div>uniCloud Web控制台</div>
</div>
</a>
<a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>论坛</div>
</div>
</a>
<a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
<img src="//img.cdn.aliyun.dcloud.net.cn/uni-app/uniad-520.png" width="20" height="20"/>
<div class="contact-smg">
<div>uniAD</div>
</div>
</a>
<a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-tongji-icon.png" width="20" height="20"/>
<div class="contact-smg">
<div>uni统计</div>
</div>
</a>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20"/>
<div class="contact-smg">
<div>
代码仓库：<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a>、<a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>官方QQ交流群</div>
<div>群16：719211033 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0SG97jRMTnKLEqkK2qIO7mfxia2zwJoA&jump_from=webapi">点此加入</a></div>
<div>群35：713420817（2000人已满）</div>
<div>群34：530305531（2000人已满）</div>
<div>群33：498071674（2000人已满）</div>
<div>群32：166188631（2000人已满）</div>
<div>群31：567471669（2000人已满）</div>
<div>群30：371046920（2000人已满）</div>
<div>群29：202965481（2000人已满）</div>
<div>群28：166188776（2000人已满）</div>
<div>群27：811363410（2000人已满）</div>
<div>群26：147867597（2000人已满）</div>
<div>群25：165297000（2000人已满）</div>
<div>群24：672494800（2000人已满）</div>
<div>群23：599958679（2000人已满）</div>
<div>群22：687186952（2000人已满）</div>
<div>群21：717019120（2000人已满）</div>
<div>群20：165796402（2000人已满）</div>
<div>群19：165657124（2000人已满）</div>
<div>群18：698592271（2000人已满）</div>
<div>群17：951348804（2000人已满）</div>
<!-- <div>群16：719211033（2000人已满）</div> -->
<div>群15：516984120（2000人已满）</div>
<div>群14：465953250（2000人已满）</div>
<div>群13：699478442（2000人已满）</div>
<div>群12：884860657（2000人已满）</div>
<div>群11：296811328（2000人已满）</div>
<div>群10：959059626（2000人已满）</div>
<div>群9：775128777（2000人已满）</div>
<div>群8：695442854（2000人已满）</div>
<div>群7：942061423（2000人已满）</div>
<div>群6：697264024（2000人已满）</div>
<div>群5：731951419（2000人已满）</div>
<div>群4：942702595（2000人已满）</div>
<div>群3：773794803（2000人已满） </div>
<div>群2：901474938（2000人已满） </div>
<div>群1：531031261（2000人已满）</div>
</div>
</div>
<div class="contact-item">
<img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20"/>
<div class="contact-smg">
<div>关注微信公众号</div>
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90"/>
</div>
</div>
</div>
docs/component/match-media.md 0 → 100644
浏览文件 @ db2627be
#### match-media
media query 匹配检测节点。
可以指定一组 media query 规则，满足时，这个节点才会被展示。
通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。
**属性说明**
|属性名|类型|默认值|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|:-|
|min-width|number||否|页面最小宽度（ px 为单位）||
|max-width|number||否|页面最大宽度（ px 为单位）||
|width|number||否|页面宽度（ px 为单位）||
|min-height|number||否|页面最小高度（ px 为单位）||
|max-height|number||否|页面最大高度（ px 为单位）||
|height|number||否|页面高度（ px 为单位）||
|orientation|string||否|屏幕方向（ landscape 或 portrait ）||
**match-media 示例**
以下示例代码，推荐使用HBuilderX，新建uni-app项目，可直接体验完整示例。
```html
<template>
<view>
<match-media :min-width="375" :max-width="800" orientation="portrait">
<view>当页面最小宽度 375， 页面宽度最大 800，且屏幕方向时显示</view>
</match-media>
<match-media :min-height="400" :orientation="landscape">
<view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
</match-media>
</view>
</template>
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或