简要了解jQuery移动web开发的响应式布局设计


Posted in Javascript onDecember 04, 2015

响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着,无论用户是在移动、平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备。

该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计。对不同屏幕分辨率的反应方式。

没有自定义样式,我们的电网将3列的布局在所有的屏幕宽度:

简要了解jQuery移动web开发的响应式布局设计

在我们的自定义样式,我们希望此网格叠加在狭窄的宽度,然后切换到一个标准的3栏布局。在很宽的屏幕宽度,我们希望第一列占用50%的宽度,这样:

简要了解jQuery移动web开发的响应式布局设计

为了实现这样,我们需要自定义一个新的类名称,比如“my-breakpoint”。
这个类用于范围的风格在自定义媒体查询,他们将只适用于当这类添加到网格容器。传媒查询包裹我们只想50em应用以下条件的风格。
在你的媒体查询,使用EM单元代替像素点以确保媒体查询将字体大小考虑除了屏幕宽度。计算在EMS屏幕宽度,将像素的目标宽度的16,这是body的默认字体大小。

HTML5部分:

<div class="ui-grid-b my-breakpoint">
 <div class="ui-block-a">Block A</div>
 <div class="ui-block-b">Block B</div>
 <div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

CSS3部分:

@media all and (max-width: 50em) {
 .my-breakpoint .ui-block-a, 
 .my-breakpoint .ui-block-b, 
 .my-breakpoint .ui-block-c,
 .my-breakpoint .ui-block-d,
 .my-breakpoint .ui-block-e { 
  width: 100%; 
  float:none; 
 }
}

在这个媒体查询,我们设置宽为100%和否定浮动属性,50em屏幕宽度。这些规则适用于每一个网格类型由堆放选择器网格的所有类ui-block-a到ui-block-e的风格。
那是使网格的响应和添加额外的样式规则,每个断点改变起来更容易。我们鼓励您创建多个定制的断点,你需要根据你独特的内容和布局的需要。

添加一个宽屏断点调整比率

基于上面的例子,我们可以添加一个额外的断点将宽度以使第一列的宽度为50%,其他两个25%以上75em(1200像素)由额外的最小宽度媒体查询来调整宽度在自定义风格就这样:

@media all and (min-width: 75em) {
 .my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
 .my-breakpoint.ui-grid-b .ui-block-b, 
 .my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
 .my-breakpoint.ui-grid-b .ui-block-a { clear: left; }
 }
}

注意:稍窄的宽度设置为工作在四舍五入问题的跨平台。

应用自定义断点 ui-responsive

使用此预设断点,添加 ui-responsive 类到网格容器,将堆叠呈现以下560px(35em)。如果这个断点的工作不适合你的内容,我们鼓励你写一个自定义的断点如上所述。

<div class=" ui-grid-b ui-responsive ">

这些都是标准的网格是由 ui-responsive(界面反应,自定义类,如上例子my-breakpoint)的作出响应类网格容器

示例:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>responsive-grid demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
 <style>
  @media all and (max-width: 35em) {
  .my-breakpoint .ui-block-a, 
  .my-breakpoint .ui-block-b, 
  .my-breakpoint .ui-block-c,
  .my-breakpoint .ui-block-d,
  .my-breakpoint .ui-block-e { 
   width: 100%; 
   float:none; 
  }
 }
 
 @media all and (min-width: 45em) {
  .my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
  .my-breakpoint.ui-grid-b .ui-block-b, 
  .my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
 }
 </style>
</head>
<body>
 
<div data-role="page">
 <div data-role="header">
  <h1>Responsive Grid Example</h1>
 </div>
 <div data-role="content">
  <div class="ui-grid-b my-breakpoint">
   <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
   <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
   <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
  </div>
</div>
 
</body>
</html>

简要了解jQuery移动web开发的响应式布局设计

Javascript 相关文章推荐
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 #Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 #Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 #Javascript
写给小白的JavaScript引擎指南
Dec 04 #Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 #Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 #Javascript
jQuery中cookie插件用法实例分析
Dec 04 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
PHP里的中文变量说明
2011/07/23 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
php集成开发环境详解
2019/09/24 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
详解vue高级特性
2020/06/09 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
实例详解Python模块decimal
2019/06/26 Python
python中while和for的区别总结
2019/06/28 Python
python中树与树的表示知识点总结
2019/09/14 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
会计电算化专业毕业生自荐信
2013/12/20 职场文书
《搭石》教学反思
2014/04/07 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
女方离婚起诉书
2015/05/18 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
Vue的过滤器你真了解吗
2022/02/24 Vue.js
2022年四月新番
2022/03/15 日漫
MySQL 原理与优化之Update 优化
2022/08/14 MySQL