媒体查询助手类 Media Query Helper Classes
Jquery Mobile给html元素增加了用来模拟浏览器的水平竖直方向以及常用的最?最大宽度css媒介查询class.这些class会在加载,调整大小以及方向变化时更新,使你能够在css中切断这些class,以创建有响应的布局,即使在不支持媒介查询的浏览器中也可以实现
方向类 Orientation Classes
取决于浏览器或者设备的方向,HTML元素总是会有"portrait"(竖屏) "landscape"(横屏) class. 你可以在css中如下使用它们:
portrait {
/* 垂直方向的变化的代码 */
}
.landscape {
/* 水平方向的变化的代码 */
}
最小/最大宽度折断点Class Min/Max Width Breakpoint Classes
默认情况下, 我们为如下宽度创建了折断: 320,80,68,024. 这些宽度对应着如同这样的class:"min-width-320px","max-width-480px"这意味着这些class可以应用在 替换(或附加) 它们模拟的等值的媒介查询
myelement {
float: none;
}
.min-width-480px .myelement {
float: left;
}
Jquery Mobile中的许多插件都利用了这些宽度折断点.例如,当浏览器宽度在480以上时,表单元素会浮动在label的旁边. 约束表单文本框的CSS在支持这样的行为时看起来像这样:
label.ui-input-text {
display: block;
}
.min-width-480px label.ui-input-text {
display: inline-block;
}
添加宽度折断点 Adding Width Breakpoints
要利用你自己的宽度折断点。Jquery Mobile公开$.mobile.addResolutionBreakpoints 函数,该函数接受一个数字或者数字的数组,这些值无论何时在函数被应用到时会被添加到min/max折断点中.
//添加一个1200像素的最大/最小折断点
$.mobile.addResolutionBreakpoints(1200);
///添加一个1200像素和1400像素2个最大/最小折断点
$.mobile.addResolutionBreakpoints([1200,1440]);
Running Media Queries 运行媒介查询
Jquery Mobile 提供一个函数允许你来测试是否有特殊的css 媒介查询生效,只需调用 $.mobile.media()然后传递一个media type 或 query即可.如果浏览器支持你传递的那种type或query,它会立即生效,函数会返回true,否则会返回false.
//测试屏幕媒体类型
$.mobile.media("screen");
//测试最小宽度的媒介查询
$.mobile.media("screen and (min-width: 480px)");
//测试是否为苹果4代手机的屏幕(视网膜)
$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");
分享到:
相关推荐
1、资源内容地址:https://blog.csdn.net/abc6838/article/details/143720369 2、数据特点:今年全新,手工精心整理,放心引用,数据来自权威,且标注《数据来源》,相对于其他人的控制变量数据准确很多,适合写论文做实证用 ,不会出现数据造假问题 3、适用对象:大学生,本科生,研究生小白可用,容易上手!!! 4、课程引用: 经济学,地理学,城市规划与城市研究,公共政策与管理,社会学,商业与管理
CPPC++_更好的Windows字体渲染
10018
cppc++
二环北路东段欣心家园小区商业B段(中石油加油站东邻).m4a
cppc++
C2005
Python课程设计之高校教务系统
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
10023
使用QUndoStack撤销栈实现QTreeWidget删除item及撤销、重做
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
Python课程设计之飞机大战3.zip
SpringBoot分布式事务
CPPC++_tensorort for yolo系列YOLOv10YOLOv9YOLOv8YOLOv7YOLOv6Y
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
收录了「IT无知君」CSDN博客中涉及的Java项目源码,还有许多的开发工具类,都是我自己在用在不断维护的,需要请进!
CPPC++_更新你的CFW作弊码固件,更直接地从你的任天堂交换机
test-dadfateq