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>

 

学习思路

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

 

版权声明：本文为Renyi-Fan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Renyi-Fan/p/8938730.html