响应式设计和 jQuery Mobile

最新推荐文章于 2024-11-10 22:45:39 发布

wouderw

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量91

点赞数

文章标签： jquery photoshop 前端

本文链接：https://blog.csdn.net/wouderw/article/details/128462696

版权

移动优先仍然重要吗？
是的！您仍然需要以移动优先的心态设计程序的所有功能。人们在手机上花费的时间越来越多，他们希望为他们开发产品的公司能够开发出能让他们继续通过手机查看这些产品的产品。如果您无法为他们做到这一点，他们可能会转向另一家可以为他们提供此类功能的公司。

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

一般响应式 Web 功能
网络开始是响应式的。诚然，Web 并没有做太多事情，所以当 Internet 主要是文档时，响应很容易。HTML 文档自然换行到下一行并顺着页面向下流动。

一路上，事情发生了变化。开发人员开始使用 PhotoShop 等工具设计网站，并希望这些设计具有完美的像素渲染效果。像素的问题在于它们不是很灵活。总是可以使用百分比而不是像素，但使用起来比较笨拙，所以像素仍然是最受欢迎的。

HTML5 和 CSS3 为响应式设计提供了更多支持。让我们

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

他们总是进入页面的 <head> 部分

它们从不显示

它们主要由键/值对组成：name = key 和 content = value

视口
viewport 是一种特殊类型的元标记，它定义了移动设备的屏幕。在示例程序中，视口元标记如下所示：

上面的属性意思是：

width=device-width - 将像素转换为 CSS 像素

initial-scale=1 - 设置比例级别

user-scalable=no - 关闭缩放

如果初始比例不是 1，则缩放可以更小或更大。如果 user-scalable 设置为 yes，则用户可以通过点击、捏合或浏览器支持的任何缩放手势来设置缩放级别。

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

@media 屏幕和（最大宽度：1024px）和（方向：纵向）

{

}
上述媒体查询的意思是：

对于屏幕媒体类型

仅在以下情况下定义类

宽度小于1023

并且方向是纵向

媒体查询以@media 开头，然后是媒体类型，在本例中为屏幕。其他类型是全部、盲文、浮雕、手持、打印、项目、语音、tty 和电视。您可以使用诸如 not、and 和 only 之类的逻辑运算符来编写复杂的媒体查询。

not - 用于否定整个媒体查询

and - 用于将多个媒体功能组合到一个媒体查询中

only - 用于仅在整个查询匹配时应用样式

最后，有一个逗号分隔的列表，它的行为类似于一个操作符。如果任何媒体查询返回 true，则应用样式表。

应用媒体查询的一种模式是首先为最窄的设备定义查询，然后为平板电脑定义查询，最后为台式机定义。现在所有这些定义都非常松散并且可以解释。您可能需要调整它们以满足您的需要。

如果您在 Nexus 4 等具有 1280x768 分辨率显示屏的高像素手机上运行演示，为什么它的显示效果不像台式机？关键是视口元标记。此标记由移动浏览器读取，将像素重新定义为 CSS 像素。CSS 像素的精确数量因设备而异，但在 iPhone 上为 320，在 Nexus 4 上为 384，两者均小于定义为平板电脑的最低 480 像素。

jQuery 移动功能
到目前为止，我们还没有研究 jQuery Mobile 的特性。从一开始，jQuery Mobile 就具有响应式功能。其中一些是：

grid - 一种构建基于 CSS 的列的简单方法，该列也可以响应

表格 - 根据显示宽度有选择地隐藏或显示表格列

面板 - 创建一个隐藏的页面，向左或向右滑动以显示自己

网格
网格从一开始就与 jQuery Mobile 一起使用。它们本质上是自动调整大小的列，当页面大小发生变化时，它们会动态调整自己的大小。可用列的数量从二到五不等。要更改可用列的数量，只需更改根 p 上的类，然后从集合中添加或删除 ap。

ui-grid-a = 2 列

ui-grid-b = 3 列

ui-grid-c = 4 列

ui-grid-d = 5 列

表
表格是随着 jQuery Mobile 1.3.0 的发布而添加的。它们允许响应式显示表格数据。有两种基本类型的表：默认的重排和列切换。回流表水平放置表数据，直到达到最小大小，然后将每一行的所有数据组合在一起，并在页面上重新流动。

在列切换模式下，表格的每一列都可以被赋予单独的优先级，当数据不再水平放置时，具有最低优先级数字但仍然可见的列将被隐藏。这一直持续到达到最小大小或只剩下一列。

面板
面板是一个隐藏的页面，它通过从左侧或右侧滑动到页面上来显示自己。它可以支持几乎所有的 jQuery Mobile 小部件。当面板显示时，单击页面上的任何其他位置将关闭它。