From db2627bee660afe85dbd1265d7e4f0edc9e4b6e5 Mon Sep 17 00:00:00 2001 From: tianjiaxing Date: Tue, 25 Aug 2020 16:05:11 +0800 Subject: [PATCH] docs: add match-media.md --- docs/component/_sidebar.md | 167 +++++++++++++++++----------------- docs/component/match-media.md | 36 ++++++++ 2 files changed, 120 insertions(+), 83 deletions(-) create mode 100644 docs/component/match-media.md diff --git a/docs/component/_sidebar.md b/docs/component/_sidebar.md index 68f78fd03..35a4ecbd9 100644 --- a/docs/component/_sidebar.md +++ b/docs/component/_sidebar.md @@ -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)
  • -
    - - -
    -
    uniCloud Web控制台
    -
    -     - - -
    -
    论坛
    -
    -     - - -
    -
    uniAD
    -
    -     - - -
    -
    uni统计
    -
    -     -
    - -
    -
    - 代码仓库：码云、GitHub -
    -
    -
    -
    - -
    -
    官方QQ交流群
    -
    群16：719211033  点此加入
    -
    群35：713420817（2000人已满）
    -
    群34：530305531（2000人已满）
    -
    群33：498071674（2000人已满）
    -
    群32：166188631（2000人已满）
    -
    群31：567471669（2000人已满）
    -
    群30：371046920（2000人已满）
    -
    群29：202965481（2000人已满）
    -
    群28：166188776（2000人已满）
    -
    群27：811363410（2000人已满）
    -
    群26：147867597（2000人已满）
    -
    群25：165297000（2000人已满）
    -
    群24：672494800（2000人已满）
    -
    群23：599958679（2000人已满）
    -
    群22：687186952（2000人已满）
    -
    群21：717019120（2000人已满）
    -
    群20：165796402（2000人已满）
    -
    群19：165657124（2000人已满）
    -
    群18：698592271（2000人已满）
    -
    群17：951348804（2000人已满）
    - -
    群15：516984120（2000人已满）
    -
    群14：465953250（2000人已满）
    -
    群13：699478442（2000人已满）
    -
    群12：884860657（2000人已满）
    -
    群11：296811328（2000人已满）
    -
    群10：959059626（2000人已满）
    -
    群9：775128777（2000人已满）
    -
    群8：695442854（2000人已满）
    -
    群7：942061423（2000人已满）
    -
    群6：697264024（2000人已满）
    -
    群5：731951419（2000人已满）
    -
    群4：942702595（2000人已满）
    -
    群3：773794803（2000人已满）
    -
    群2：901474938（2000人已满）
    -
    群1：531031261（2000人已满）
    -
    -
    -
    - -
    -
    关注微信公众号
    - -
    -
    -
    +
    + + +
    +
    uniCloud Web控制台
    +
    +     + + +
    +
    论坛
    +
    +     + + +
    +
    uniAD
    +
    +     + + +
    +
    uni统计
    +
    +     +
    + +
    +
    + 代码仓库：码云、GitHub +
    +
    +
    +
    + +
    +
    官方QQ交流群
    +
    群16：719211033  点此加入
    +
    群35：713420817（2000人已满）
    +
    群34：530305531（2000人已满）
    +
    群33：498071674（2000人已满）
    +
    群32：166188631（2000人已满）
    +
    群31：567471669（2000人已满）
    +
    群30：371046920（2000人已满）
    +
    群29：202965481（2000人已满）
    +
    群28：166188776（2000人已满）
    +
    群27：811363410（2000人已满）
    +
    群26：147867597（2000人已满）
    +
    群25：165297000（2000人已满）
    +
    群24：672494800（2000人已满）
    +
    群23：599958679（2000人已满）
    +
    群22：687186952（2000人已满）
    +
    群21：717019120（2000人已满）
    +
    群20：165796402（2000人已满）
    +
    群19：165657124（2000人已满）
    +
    群18：698592271（2000人已满）
    +
    群17：951348804（2000人已满）
    + +
    群15：516984120（2000人已满）
    +
    群14：465953250（2000人已满）
    +
    群13：699478442（2000人已满）
    +
    群12：884860657（2000人已满）
    +
    群11：296811328（2000人已满）
    +
    群10：959059626（2000人已满）
    +
    群9：775128777（2000人已满）
    +
    群8：695442854（2000人已满）
    +
    群7：942061423（2000人已满）
    +
    群6：697264024（2000人已满）
    +
    群5：731951419（2000人已满）
    +
    群4：942702595（2000人已满）
    +
    群3：773794803（2000人已满）
    +
    群2：901474938（2000人已满）
    +
    群1：531031261（2000人已满）
    +
    +
    +
    + +
    +
    关注微信公众号
    + +
    +
    +
    diff --git a/docs/component/match-media.md b/docs/component/match-media.md new file mode 100644 index 000000000..9bb2d6d11 --- /dev/null +++ b/docs/component/match-media.md @@ -0,0 +1,36 @@ +#### 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 + + +``` -- GitLab