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>
学习思路
可以这样边做边学,效果最佳
amaze ui响应式辅助的更多相关文章
- amaze ui响应式表格
amaze ui响应式表格 这里的div外嵌设置格式倒是不错的选择
- amaze UI 笔记 - CSS
导航添加依据 http://amazeui.org/css/ 下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一.基本样式 1.统一样式 说明了为什么使用Nor ...
- amaze ui各个模块简单说明
amaze ui各个模块简单说明 导航添加依据 http://amazeui.org/css/ 下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一.基本样式 1 ...
- 一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新!
相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...
- JavaScript辅助响应式
js响应式 rem辅助响应式布局:其实就是指在HTML页面的大小不断变化的时候,里面的宽.高.字体等等也随之变化,主要是通过获取window.innerwidth的值来进行判断,7.5rem===10 ...
- Android响应式UI教程
原文:Responsive UI Tutorial for Android 作者:James Nocentini 译者:kmyhy 2017/5/4 更新说明: 由 James Nocentini 更 ...
- 使用ConstraintLayout(约束布局)构建响应式UI
使用ConstraintLayout(约束布局)构建响应式UI 转 https://www.300168.com/yidong/show-2740.html 核心提示:ConstraintLa ...
- 关于有偿提供拼图响应式后台的通知---------pintuer ui的官方通知(www.pintuer.com)
拼图响应式前端框架版响应式后台正式发布. 考虑到目前拼图的状况,我们不打算免费开放下载,但也不会收各位朋友1分钱,该版后台将有偿提供给各位给予拼图贡献的朋友. 废话不多说,一切皆以有图有真相,下面上图 ...
- 2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com
近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那 ...
随机推荐
- 实时监控Cat之旅~对请求是否正常结束做监控(分布式的消息树)
对基于请求的分布式消息树的分析 在MVC时有过滤器System.Web.Mvc.ActionFilterAttribute,它可以对action执行的整个过程进行拦截,执行前与执行后我们可以注入自己的 ...
- POJ 1320 Street Numbers(佩尔方程)
Street Numbers Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3078 Accepted: 1725 De ...
- github下载速度慢解决方法
1.获取 global.ssl.fastly地址 访问 http://github.global.ssl.fastly.net.ipaddress.com/#ipinfo 获取cdn域名以及ip地址 ...
- 从Chrome源码看audio/video流媒体实现二(转)
第一篇主要介绍了Chrome加载音视频的缓冲控制机制和编解码基础,本篇将比较深入地介绍解码播放的过程.以Chromium 69版本做研究. 由于Chromium默认不能播放Mp4,所以需要需要改一下源 ...
- 洛谷1525 关押罪犯NOIP2010 并查集
问题描述 S城现有两座监狱,一共关押着N名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示某两 ...
- MySql系列之单表查询
单表查询的语法 SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条数 关键字的执行 ...
- LVS+keepalived均衡nginx配置
如果单台LVS发生突发情况,例如宕机.发生不可恢复现象,会导致用户无法访问后端所有的应用程序.避免这种问题可以使用HA故障切换,也就是有一台备用的LVS,主LVS 宕机,LVS VIP自动切换到从,可 ...
- Ubuntu下哪个PDF阅读器更好使???
根据windows系统上的经验,果断选择了foxit reader的linux版本: 从 http://www.foxitsoftware.com/downloads/ 选择 “Desktop Lin ...
- python-生成器即send()用法
参考链接: http://www.mamicode.com/info-detail-2399245.html 作者首先介绍了生成器的作用:是为了让程序员可以更简单的编写用来产生值的序列的代码,然后又介 ...
- 三 概要模式 2) MR倒排索引、性能分析、搜索干扰词。
二 倒排索引 倒排索引(英语:Inverted index),也常被称为反向索引.置入档案或反向档案,是一种索引方法,被用来存储在全文搜索下某个单词在一个文档或者一组文档中的存储位置的映射. ...