媒体查询助手类 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)");
分享到:
相关推荐
Umi-OCR-main.zip
基于springboot+Web的毕业设计选题系统源码数据库文档.zip
基于springboot校外兼职教师考勤管理系统源码数据库文档.zip
58商铺全新UI试客试用平台网站源码
基于springboot大学生就业信息管理系统源码数据库文档.zip
基于SpringBoot的口腔诊所系统源码数据库文档.zip
数据存放网盘,txt文件内包含下载链接及提取码,永久有效。失效会第一时间进行补充。样例数据及详细介绍参见文章:https://blog.csdn.net/T0620514/article/details/143956923
3-240P2162218.zip
网络安全 基于Qt创建的Linux系统下的浏览器.zip
C++ 类和对象:多态-练习题目2(制作咖啡和茶叶)
基于springboot+J2EE在线项目管理与任务分配中的应用源码数据库文档.zip
简介本项目提供了一个在51单片机上运行的简单操作系统,旨在帮助学习者深入理解操作系统的基本原理和任务调度机制。该操作系统通过汇编和C语言编写,实现了任务调度、中断处理等核心功能,并提供了详细的源代码和注释,方便学习和实践。
本文将深度卷积神经网络(CNN)设计实现一个复杂结构的生成模型,旨在通过多阶段的编码器-解码器结构,能够有效地将灰度图像转换为彩色图像。最后,本文将实现一个简单的Web应用,用户可以通过上传灰度图像,应用会使用预训练的Caffe模型对其进行颜色化,并将结果返回给用户。 1.模型设计:模型由多个卷积层、ReLU激活函数和批归一化层组成,通过前向传播函数将输入的灰度图像(L通道)转换为彩色图像(ab通道)。如果指定了 pretrained=True,则会自动下载并加载预训练的模型权重。 2. 系统通过Flask框架提供了一个Web应用,用户可以上传灰度图像,系统会自动将其转换为彩色图像,并在网页上显示结果。整个过程包括文件验证、图像处理、颜色化预测和结果展示,具有较高的实用性和用户体验。
一个JAVA图形化的、联网的五子棋游戏.zip javaweb
KWDB 是一款面向 【AIoT 场景】的【分布式多模数据库】,支持在同一实例同时建立时序库和关系库并融合处理多模数据,具备千万级设备接入、百万级数据秒级写入、亿级数据秒级读取等时序数据高效处理能力,具有稳定安全、高可用、易运维等特点。
页面数量:7页 网页主题:网站模板、酒店网站模板、官方网站模板 网页页面:首页、关于我们、相关服务、服务详情、在线博客、博客详情、在线留言 页面实现元素:加载动画、滚动加载、主题切换、导航栏 、轮播图、图文列表、图片切换、 文字列表、 按钮悬停、图片悬停、表单 实现技术:HTML、CSS 、JQuery 源码样式及js文件均分开存放,所有内容仅供初学者学习参考
内容概要:本文档提供了详细的 Neo4j 安装与配置指南,涵盖 Windows、Linux 和 Mac 系统的安装步骤。具体包括下载、安装、启动服务、修改配置文件(如端口配置、远程访问和内存限制)、设置管理员密码以及基本的 Cypher 查询语言使用方法。同时,还提供了一些常见问题及其解决方案。 适合人群:数据库管理员、软件开发人员、系统管理员。 使用场景及目标:①帮助初学者快速掌握 Neo4j 的安装与配置;②适用于需要搭建和使用图数据库的项目;③为已有用户解决常见问题。 其他说明:本文档不仅包含了基础的安装和配置流程,还提供了实际操作中可能遇到的问题及其解决方法,有助于提高使用者的实际操作能力。
基于SpringBoot+Vue的软件产品展示销售系统源码数据库文档.zip
《书戴嵩画牛》教学课件.pptx
20届智能车 【项目资源】:包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源,毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】:适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。