简要了解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 相关文章推荐
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
详解小程序循环require之坑
Mar 08 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 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代码
2011/11/27 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
看了就知道什么是JSON
2007/12/09 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
微信JS接口大全
2016/08/25 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python基础之入门必看操作
2017/07/26 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
什么是Smart Navigation?
2016/07/03 面试题
2014年上半年工作自我评价
2014/01/18 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
数学教师个人总结
2015/02/06 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
小学运动会加油词
2015/07/18 职场文书