amaze ui响应式辅助

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>

 

学习思路

可以这样边做边学，效果最佳