响应式设计和jQuery Mobile

"移动优先！"是全世界网页设计师的新呼声。但你如何做到这一点？你必须废止你目前所有的网络技能吗？它是由巫师般的设计师创造的、凡人永远无法理解的魔法吗？信不信由你，通过jQuery Mobile和CSS3 Media Queries的结合，你可以很容易地创建一个在手机、平板电脑或桌面上都很好看的网站。

移动优先是否仍然重要？

是的！你仍然需要以移动优先的心态来设计你程序的所有功能。人们在手机上花费的时间越来越多，他们希望为他们创造产品的公司能够拿出一些东西，让他们能够继续从手机上查看这些产品。如果你不能为他们做到这一点，他们可能会简单地转到另一家能够为他们提供这种功能的公司。

当涉及到你将使用和接受的具体功能时，你有很多选择，但你需要考虑移动优先如何能帮助提高你的应用程序被大众使用的机会。

一般的响应式网络功能

网络一开始就是响应式的。现在承认，网络并没有做很多事情，所以当互联网主要是文档的时候，响应性很容易。HTML文档自然地被包裹到下一行，并在页面上流动。

随着时间的推移，事情发生了变化。开发人员开始用PhotoShop等工具设计网站，并希望这些设计能有完美的像素呈现。像素的问题是，它们不是很灵活。一直以来，我们都可以用百分比来代替像素，但它们操作起来更笨拙，所以像素仍然是最受欢迎的。

有了HTML5和CSS3，就有了对响应式设计的更多支持。列表

元标签

一段时间以来，元标签一直是SEO人群的最爱。元标签被用来定义关键词、描述，甚至是重定向。这里有一些关于元标签的规则：

它们总是被放在页面的<head>部分。
它们从不显示
它们主要由键/值对组成：名称=键和内容=值

视口

视口是一种特殊类型的元标签，它定义了移动设备的屏幕。在本例程序中，视口元标签看起来像：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

上面的属性意味着：

width=device-width - 将像素转换为CSS像素
initial-scale=1 - 设置缩放级别
user-scalable=no - 关闭缩放功能

如果初始规模是1以外的其他值，缩放可以更小或更大。如果user-scalable被设置为yes，那么用户就会通过点击、捏住或浏览器支持的任何缩放手势来设置缩放级别。

媒体查询

媒体查询是响应式设计的主力军。一个媒体查询是一个媒体类型和至少一个限制样式表范围的表达。下面是一个例子。

 @media screen and (max-width: 1024px) and (orientation:portrait)

{

}

上面的媒体查询意味着:

对于一个屏幕媒体类型
仅在以下情况下定义类
- 宽度小于1023
- 而且方向是纵向的

媒体查询以@media开头，然后是媒体类型，在本例中是屏幕。其他类型有全部、盲文、浮雕、手持、打印、项目、语音、TTY和TV。你可以使用逻辑运算符，如not、and和only，组成复杂的媒体查询。

not - 用来否定整个媒体查询
and - 用于将多个媒体特征组合成一个媒体查询
only - 用来在整个查询匹配的情况下应用一个样式。

最后，还有一个逗号分隔的列表，它的行为就像一个操作符。如果任何媒体查询返回真，样式表就会被应用。

应用媒体查询的一个模式是先为最窄的设备定义查询，然后为平板电脑定义，最后是桌面。现在，所有这些定义都是非常松散的，可以进行解释。你可能需要调整它们以适应你的需要。

如果你在一个高像素的手机上运行演示，比如Nexus 4，它的显示屏分辨率为1280x768，为什么它不能像桌面一样显示呢？关键是视口元标签。这个标签是由移动浏览器读取的，它将像素重新定义为CSS像素。CSS像素的精确数量因设备而异，但在iPhone上是320，在Nexus 4上是384，都低于被定义为平板电脑的最低480像素。

jQuery移动功能

到目前为止，我们还没有研究过jQuery Mobile的功能。从一开始，jQuery Mobile就有响应性的功能。其中一些是:

grid - 一个简单的方法来建立基于CSS的列，也可以是响应式的。
表格--根据显示宽度有选择地隐藏或显示表格列
面板 - 创建一个隐藏的页面，向左或向右滑动以显示自己。

网格

网格从一开始就与jQuery Mobile在一起。他们本质上是自定大小的列，当页面的大小改变时，他们会动态地调整自己的大小。可用的列的数量从2到5不等。要改变可用的列的数量，只需改变根p上的类，然后从集合中添加或删除一个p。

ui-grid-a = 2列
ui-grid-b = 3列
ui-grid-c = 4列
ui-grid-d = 5列

表格

表格是随着jQuery Mobile 1.3.0的发布而增加的。它们允许表格数据的响应式显示。有两种基本类型的表格：默认的回流和列切换。回流表水平放置表格数据，直到它达到最小尺寸，然后每一行的所有数据都被分组，并重新流向页面。

在列切换模式下，表格的每一列都可以被赋予单独的优先权，当数据不能再水平放置时，具有最低优先权号的、仍然可见的那一列就会被隐藏。这种情况一直持续到达到最小尺寸或只剩下一列为止。

面板

一个面板是一个隐藏的页面，通过从左边或右边滑动到页面上来显示自己。它可以支持几乎所有的jQuery Mobile widget。当面板显示时，点击页面上的其他地方将关闭它。

最佳实践

设计风格从 "移动优先 "开始，然后再扩大。
使用 "最小宽度 "来限制样式。
倾向于使用百分比和电子表格，而不是像素

响应式设计和jQuery Mobile功能介绍