amaze ui响应式辅助
响应式辅助
就是不同的显示屏幕,或者手机的横竖屏,你可以控制栏目的显影,还是挺有帮助的
视口大小
.am-[show|hide]-[sm|md|lg][-up|-down|-only]
,调整浏览器窗口大小查看元素的显隐。
class 释义:
show
显示,hide
隐藏,这应该不难理解;sm
、md
、lg
是划分屏幕大小区间的缩写,对应 small、medium、large,网格里面做了说明;down
指小于区间,up
指大于区间,only
指仅在这个区间。
按照上面的翻译一下下面的 class:
.am-show-sm-only
: 只在sm
区间显示.am-show-sm-up
: 大于sm
区间时显示.am-show-sm
: 在sm
区间显示,如果没有设置md
、lg
区间的显隐,则元素在所有区间都显示.am-show-md-down
: 小于md
区间时显示
显示辅助 class | 隐藏辅助 class |
---|---|
.am-show-sm-only .am-show-sm-up .am-show-sm .am-show-sm-down |
.am-hide-sm-only .am-hide-sm-up .am-hide-sm .am-hide-sm-down |
.am-show-md-only .am-show-md-up .am-show-md .am-show-md-down |
.am-hide-md-only .am-hide-md-up .am-hide-md .am-hide-md-down |
.am-show-lg-only .am-show-lg-up .am-show-lg .am-show-lg-down |
.am-hide-lg-only .am-hide-lg-up .am-hide-lg .am-hide-lg-down |
- medium + 可见
- large 可见
- 仅 large 可见
<ul>
<li class="am-show-sm-only">仅 small 可见</li>
<li class="am-show-md-up">medium + 可见</li>
<li class="am-show-md-only">仅 medium 可见</li>
<li class="am-show-lg-up">large 可见</li>
<li class="am-show-lg-only">仅 large 可见</li>
</ul>
屏幕方向
- 横屏:
.am-show-landscape
,.am-hide-landscape
- 竖屏:
.am-show-portrait
,.am-hide-portrait
- 横屏可见...
<ul>
<li class="am-show-landscape">横屏可见...</li>
<li class="am-show-portrait">竖屏可见...</li>
</ul>
学习思路
可以这样边做边学,效果最佳