简要了解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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
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
PHP操作xml代码
2010/06/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
linux 下实现python多版本安装实践
2014/11/18 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
团员个人的自我评价
2013/12/02 职场文书
检察官就职演讲稿
2014/01/13 职场文书
个人优缺点自我评价
2014/01/27 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
市场营销工作计划书
2014/09/15 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
节水倡议书
2015/01/19 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
用Python创建简易网站图文教程
2021/06/11 Python