|
Post by account_disabled on Jan 30, 2024 23:02:33 GMT -8
以下是我的新书《Jump Start 响应式网页设计》第二版的独家摘录。副本在世界各地的商店出售,或者您可以在此处购买电子书形式。 响应式网页设计的核心有两个主要构建块:媒体查询和视口。在这篇文章中,我们将研究构建响应式网站时的媒体查询。 媒体查询是将许多其他响应概念和工具连接在一起的粘合剂。它们是一个简单但功能强大的概念,允许您检测设备属性、定义规则并基于它们加载不同的 CSS 属性。例如,您可以针对不同设备优化导航菜单,将桌面浏览器上的完整水平菜单转换为移动设备上经常遇到的“汉堡包”菜单。 创建查询 让我们尝试一个更实质性的例子。RWDflix 中的主要内容aside旨在显示公告和新闻。移动设备和平板电脑访问者可能希望专注于观看节目,而不是其他任何事情,因此让我们为较小屏幕设备的用户隐藏此元素。 在本章的其余部分中,我将使用@media前面介绍的媒体查询方法。这是个人喜好,作为实验,您可能想尝试使用其他方法重写示例。 Learn to Code with JavaScript 删除当前的asideCSS 类并将其 WhatsApp 号码数据 替换为以下媒体查询媒体查询示例2 如果您在桌面浏览器中调整页面大小,您将看到aside随着您扩大和缩小浏览器窗口而出现和消失,主要内容也会相应调整。 您可以在媒体查询中使用基本逻辑。这允许您组合多个条件。例如,您可以使用逻辑 如果设备的屏幕宽度在 640 像素到1136 像素之间,上面的代码将在查询中调用 CSS 样式。该min-width属性是屏幕的最小宽度和max-width最大宽度。 为了匹配此媒体查询,两个条件都必须为真。如果只有一个条件为真,则也可以使用逻辑“或”来匹配查询,逻辑“或”(令人困惑地)用逗号表示。 以下查询将适用于screen或print设备 结合起来进行更复杂的查询。这是在较大尺寸的手机上呈现的当前页面,但处于横向模式: 媒体查询示例 3 在上面的屏幕截图中,屏幕宽度为 732 像素,高于上面设置的 640 像素。尽管如此,它仍然aside不太适合窗口,所以如果屏幕尺寸低于 640 像素,或者设备处于横向模式,我们将其隐藏以aside在横向模式下显示平板电脑,同时也显示如何将逻辑检查组合在一起。 媒体查询示例 4 使用 Only 和 Not 进行逻辑查询 您还可以使用only和进行精确的媒体查询not。例如,此媒体查询将匹配至少640px宽且排除打印媒体类型的设备相反,此查询仅适用于至少640px宽的屏幕设备查询功能 到目前为止,我们看到的width和查询是使用最广泛的一些,但是还有其他几个媒体功能对于检查设备功能也很有用。
|
|