媒体查询助手类 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)");
分享到:
相关推荐
tables-3.6.1-cp39-cp39-win_amd64.whl
基于springboot大学生心理咨询平台源码数据库文档.zip
基于Java web 实现的仓库管理系统源码,适用于初学者了解Java web的开发过程以及仓库管理系统的实现。
基于springboot智能推荐旅游平台源码数据库文档.zip
内容概要:本文是一份详尽的Ruby语言教程,首先介绍了Ruby语言的基本信息和发展背景。接着详细讲解了Ruby的基础语法,如变量、数据类型、运算符、控制流等,并深入探讨了面向对象编程的关键概念,包括类、对象、继承、封装和多态。随后介绍了Ruby的一些高级特性,如模块、异常处理、迭代器和文件I/O操作。最后,讨论了Ruby在Web开发中的应用,尤其是与Rails框架的结合。每个部分都配有相应的代码示例,帮助读者更好地理解和实践。 适合人群:适用于初学者和有一定基础的程序员,特别是对Ruby语言感兴趣的人。 使用场景及目标:学习和掌握Ruby语言的各项基础知识和高级特性,为进一步进行Web开发或其他相关编程打下坚实的基础。 其他说明:教程中的每一部分内容都有详细的解释和代码示例,非常适合自学和教学使用。
GEE训练教程——Landsat5、8和Sentinel-2、DEM和各2哦想指数下载
基于springboot在线问诊系统源码数据库文档.zip
基于springboot的流浪猫狗救助系统源码数据库文档.zip
GEE训练教程
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
本教程帮助您了解什么是 SQLite,它与 SQL 之间的不同,为什么需要它,以及它的应用程序数据库处理方式。需要的朋友们可以参考看看! SQLite是一个软件库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite是一个增长最快的数据库引擎,这是在普及方面的增长,与它的尺寸大小无关。SQLite 源代码不受版权限制。 什么是 SQLite? SQLite是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。它是一个零配置的数据库,这意味着与其他数据库一样,您不需要在系统中配置。 就像其他数据库,SQLite 引擎不是一个独立的进程,可以按应用程序需求进行静态或动态连接。SQLite 直接访问其存储文件。 为什么要用 SQLite? 不需要一个单独的服务器进程或操作的系统(无服务器的)。 SQLite 不需要配置,这意味着不需要安装或管理。 一个完整的 SQLite 数据库是存储在一个单一的跨平台的磁盘文件。 SQLite 是非常小的,是轻量级的,完全配置时小于 400KiB,省略可选功能配置时小于250K
基于springboot学生选课系统源码数据库文档.zip
【Android UI】SurfaceView中使用 Canvas 绘制可缩放大图 ( 拖动和缩放相关的变量 | Canvas 绘图函数 | 手势识别 多点触控流程 | 拖动图片 | 缩放图片 ) 博客链接:https://blog.csdn.net/shulianghan/article/details/143950948 一、需求分析 和 核心要点 说明 1、需求说明 2、核心要点 - 拖动和缩放相关的变量 3、核心要点 - Canvas 绘图函数 4、核心要点 - 手势识别 多点触控流程 5、核心要点 - 拖动图片 6、核心要点 - 缩放图片 二、完整代码示例 1、环境说明 2、SurfaceView 完整代码 3、运行结果
基于springboot+web的二手闲置交易系统源码数据库文档.zip
GEE训练教程
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
基于SpringBoot的宠物寄领养网站源码数据库文档.zip
基于springboot的电影院售票管理系统源码数据库文档.zip
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
数据存放网盘,txt文件内包含下载链接及提取码,永久有效。失效会第一时间进行补充。样例数据及详细介绍参见文章:https://blog.csdn.net/T0620514/article/details/143956923