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>

学习思路

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

amaze ui响应式辅助的更多相关文章

  1. amaze ui响应式表格

    amaze ui响应式表格 这里的div外嵌设置格式倒是不错的选择

  2. amaze UI 笔记 - CSS

    导航添加依据 http://amazeui.org/css/  下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一.基本样式 1.统一样式 说明了为什么使用Nor ...

  3. amaze ui各个模块简单说明

    amaze ui各个模块简单说明 导航添加依据 http://amazeui.org/css/  下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一.基本样式 1 ...

  4. 一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新!

    相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...

  5. JavaScript辅助响应式

    js响应式 rem辅助响应式布局:其实就是指在HTML页面的大小不断变化的时候,里面的宽.高.字体等等也随之变化,主要是通过获取window.innerwidth的值来进行判断,7.5rem===10 ...

  6. Android响应式UI教程

    原文:Responsive UI Tutorial for Android 作者:James Nocentini 译者:kmyhy 2017/5/4 更新说明: 由 James Nocentini 更 ...

  7. 使用ConstraintLayout(约束布局)构建响应式UI

    使用ConstraintLayout(约束布局)构建响应式UI 转 https://www.300168.com/yidong/show-2740.html     核心提示:ConstraintLa ...

  8. 关于有偿提供拼图响应式后台的通知---------pintuer ui的官方通知(www.pintuer.com)

    拼图响应式前端框架版响应式后台正式发布. 考虑到目前拼图的状况,我们不打算免费开放下载,但也不会收各位朋友1分钱,该版后台将有偿提供给各位给予拼图贡献的朋友. 废话不多说,一切皆以有图有真相,下面上图 ...

  9. 2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com

    近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那 ...

随机推荐

  1. Persistence

    Most of the programs we have seen so far are transient in the sense that they run for a short time a ...

  2. mysql InnoDB引擎 共享表空间和独立表空间(转载)

    PS:innodb这种引擎,与MYISAM引擎的区别很大.特别是它的数据存储格式等.对于innodb的数据结构,首先要解决两个概念性的问题: 共享表空间以及独占表空间. 1.什么是共享表空间和独占表空 ...

  3. 23.STL容器小结

  4. metasploit.meterpreter学习笔记(博主推荐)

    Metasploit学习笔记(博主推荐) 继续上面的博客 metasploit.meterpreter的基本使用: 首先来获取当前系统(即xp)下的正在运行的一些进程 获得进程之后,我们通过migra ...

  5. Hadoop框架基础(三)

    ** Hadoop框架基础(三) 上一节我们使用eclipse运行展示了hdfs系统中的某个文件数据,这一节我们简析一下离线计算框架MapReduce,以及通过eclipse来编写关于MapReduc ...

  6. 线程1—Thread

    随便选择两个城市作为预选旅游目标.实现两个独立的线程分别显示10次城市名,每次显示后休眠一段随机时间(1000ms以内),哪个先显示完毕,就决定去哪个城市.分别用Runnable接口和Thread类实 ...

  7. Maven项目:Plugin execution not covered by lifecycle configuration 解决方案

    这个是eclipse中配置文件pom.xml报的错.具体错误信息: Plugin execution not covered by lifecycle configuration: org.apach ...

  8. [USACO12MAR]摩天大楼里的奶牛(状态压缩DP)

    题意 给出n个物品,体积为w[i],现把其分成若干组,要求每组总体积<=W,问最小分组.(n<=18) 题解 一看以为是弱智题.(可能真的是,我太菜了) 然后跟walthou夸下海口:这么 ...

  9. write---向指定登录用户终端上发送信息

    write命令用于向指定登录用户终端上发送信息.通过write命令可传递信息给另一位登入系统的用户,当输入完毕后,键入EOF表示信息结束,write命令就会将信息传给对方.如果接收信息的用户不只登入本 ...

  10. Python组织文件 实践:查找大文件、 用Mb、kb显示文件尺寸 、计算程序运行时间

    这个小程序很简单原本没有记录下来的必要,但在编写过程中又让我学到了一些新的知识,并且遇到了一些不能解决的问题,然后,然后就很有必要记录一下. 这个程序的关键是获取文件大小,本来用 os.path.ge ...