• amaze ui响应式辅助


    amaze ui响应式辅助

    响应式辅助

    就是不同的显示屏幕,或者手机的横竖屏,你可以控制栏目的显影,还是挺有帮助的

    视口大小

    .am-[show|hide]-[sm|md|lg][-up|-down|-only]调整浏览器窗口大小查看元素的显隐

    class 释义:

    • show 显示,hide 隐藏,这应该不难理解;
    • smmdlg 是划分屏幕大小区间的缩写,对应 small、medium、large,网格里面做了说明;
    • down 指小于区间,up 指大于区间, only 指仅在这个区间。

    按照上面的翻译一下下面的 class:

    • .am-show-sm-only: 只在 sm 区间显示
    • .am-show-sm-up: 大于 sm 区间时显示
    • .am-show-sm: 在 sm 区间显示,如果没有设置 mdlg 区间的显隐,则元素在所有区间都显示
    • .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>

    学习思路

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

  • 相关阅读:
    linux开放防火墙端口方法
    Node.js 构建TCP服务
    React高阶组件
    在create-react-app 中启用装饰器语法
    Redux
    微信小程序组件与组件之间的通讯
    微信小程序网络请求
    微信小程序的页面导航跳转
    sqoop2启动job报错
    sqoop2启动client异常
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/8938730.html
Copyright © 2020-2023  润新知