开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《jQuery Mobile快速入门》—— 2.6 带有媒体查询的响应式布局

简介:
+关注继续查看

本节书摘来异步社区《jQuery Mobile快速入门》一书中的第2章,第2.6节,作者:【美】Brad Broulik,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.6 带有媒体查询的响应式布局

jQuery Mobile快速入门
要使用jQuery Mobile来创建响应式设计,建议使用CSS3 Media Queries1。例如,如果你打算为一个特定设备的朝向增强布局,你可以使用媒体查询来检测设备的朝向,然后根据需要应用你的 CSS修改。

5ab513537927870b42c1889a3c9d8eb480685a62

在某些情况下,jQuery Mobile将会为你创建响应式设计。下面将讲解jQuery Mobile的响应式设计如何良好地应用于竖屏(portrait)模式和横屏(landscape)模式中的表单字段。例如,在竖屏视图中(见图2-13),标签位于表单字段的上面。而当将设备横屏放置时(见图2-14),表单字段和标签并排显示。这种响应式设计可以基于设备可用的屏幕真实状态提供最实用的体验。jQuery Mobile为用户提供了很多这样优秀的UX(用户体验)原则。

350c4c92b40ec00e864a50e5de59dd4cf0bbfbe8

如果在iOS中启动图2-14,并切换到横屏模式,则可能会注意到,在Mobile Safari2中存在iOS缩放问题。当元视口标记被设置为content=“width=device-width, initial-scale=1”,或者是设置为允许用户缩放的任何值时,当将设备调整为横屏放置时,将会引起页面以大于1的比例进行放大,由此导致的结果是,页面的右边将被裁切掉一部分,用户必须双击(有时可能需要操作多次)页面,才能让页面以合适的尺寸进行缩放并显示。

在Mobile Safari解决掉该问题之前,你可以使用多个选项来修复这个问题。

可以禁用缩放。由于禁用缩放时,会破坏可访问性,因此在进行该操作时务必谨慎行事。

434f8c00174a5cb2a67f852f00481bd27727e13c

在用户进行缩放时,可以动态调整元标记3。
在前面的例子中(见图2-13),通过使用min-max宽度媒体特性,jQuery Mobile能够应用响应式设计。例如,当浏览器支持的宽度大于450像素时,表单元素可以浮动在它们的标签旁边。CSS支持文本输入的这种行为,如下所示。

1955e015ca883a99b1315cae253e3229c773c246

重要:

Windows Phone 7(Internet Explorer 8和更低的版本)不支持媒体查询。如果想要在不支持媒体查询的浏览器上支持响应式设计,建议使用Respond.js4。Respond.js为不支持媒体查询的浏览器提供了该功能。
你可以找到一组数量有限的特定Webkit的媒体扩展。例如,如果要在具有高分辨率的retina(视网膜)显示屏的新iOS设备上应用CSS增强,你可以使用webkit-min-devic e-piexel-ratio媒体特性:

c6032c77231b0429962cc53d3d405ed6ba4ac0da

作为对iOS用户的一个额外奖励,jQuery Mobile包含了一全套针对retina显示屏优化过的图标,这些图标能够自动应用到带有高分辨率显示屏的任何iOS设备上。

注意:

如果你选择将媒体特定的样式隔离存放到单独的文件中,你可以使用HTML媒体属性来引用它们。如果用户比较在意文件的隔离存放,这种做法确实不错,但是从性能角度来看,该方法并不能让人满意,因为每一个独立的文件都需要一个额外的HTTP请求。

bf1ea970ec69f43497acbc791ad0fca3cfe43c03

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery插件开发的五种形态[转]
这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细。 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课。开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多。这里我把我
2703 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1018 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
940 0
10款非常有效的帮助你设计超酷响应式布局的jQuery插件
如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够 使得你的网站能够针对不同的设置做出最好显示响应。
676 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载