简要了解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 相关文章推荐
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
vue如何判断dom的class
Apr 26 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
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发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python将unicode转为str的方法
2017/06/21 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python简单实现AES加密和解密
2019/03/28 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
什么是Python中的顺序表
2020/06/02 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
求职自荐书范文
2013/12/04 职场文书
驾驶员岗位职责
2014/01/29 职场文书
技能比赛获奖感言
2014/02/14 职场文书
汽车维修求职信
2014/06/15 职场文书
社区清明节活动总结
2014/07/04 职场文书
公司合作协议范文
2014/10/01 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书