小程序组件之--match-media

不知道大家知不知道媒体查询下面是菜鸟教程上的一段文字
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
总结起来就是，只有符合某些规则，在match-media标签内的内容才能被显示。有点类似于wx:if
不同之处在于match-media之针对某些条件适用，而且比较方便的获取这些条件（这些在wx:if中都能做到，但是有些时候比较方便）。
使用媒体查询的最大作用就是设备的适配，比如，我在电脑上看到的效果和手机不一样，但是我用一套代码就可以搞定。
总之，有些时候文字还是有些显得无力，上代码。
_wxml

<match-media min-width="100" max-width="600">
  <view>博主虽然帅，但是只有你的设备宽度在100像素与600像素之间才能看见</view>
</match-media>

<match-media orientation="landscape">
  <view>博主虽然帅，但是只有在横屏下才能看见</view>
</match-media>

_效果图

看起来又失败了（为啥要说又）。找找原因吧！！

手机上是这个样子的，emmmmmmm…不用怀疑，这是没问题的。没有效果就是最好的效果。

值得注意的是，这里对尺寸的限制的默认单位是px。为什么说px就要注意了呢？因为在小程序中，我们使用的单位是rpx。这个东西怎么理解呢？你把屏幕的横向分成750份，其中一份宽度就是1rpx。是不是很简单？

一般情况下是，这个东西我是用不到的，也许我经验还是有点浅薄，没有get到它的精髓。
它还有一些其他限制，不过都大同小异。
有最大宽度限制，最大高度限制，宽度限制，高度限制，最小宽度限制，最小高度限制，是否横屏。

那么我们下期见。