网站响应式设计模式 第1篇
逻辑运算符 not、and 和 only 可用于组成复杂的媒体查询。您还可以通过用逗号分隔多个媒体查询将它们组合成一个规则。
and :用于将多个媒体特征组合到一个媒体查询中，要求每个链接的特征返回 true 以使查询为 true。它还用于将媒体功能与媒体类型连接起来。
not: 用于否定媒体查询，如果查询将返回 false，则返回 true。如果出现在逗号分隔的查询列表中，它只会否定应用它的特定查询。如果使用 not 运算符，还必须指定媒体类型。
only:仅当整个查询匹配时才应用样式。它对于防止旧浏览器应用选定的样式很有用。当不只使用时，旧浏览器会将查询屏幕和 (max-width: 500px) 解释为屏幕，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only 运算符，则还必须指定媒体类型。
,: 逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，则整个媒体语句返回真。换句话说，列表的行为类似于逻辑或运算符。
示例：查询屏幕设备+特性
示例：反向查询设备和特性（not 关键字不能用于否定单个特征查询，只能用于否定整个媒体查询)
网站响应式设计模式 第2篇
resize 事件：resize 事件会在浏览器窗口的大小发生变化时触发。你可以使用它来执行与响应式设计相关的操作，例如调整页面布局或重新计算元素的尺寸。
orientationchange 事件：orientationchange 事件会在设备方向变化（横屏/竖屏切换）时触发。这对于移动设备非常有用。
响应式设计是一种用于创建适应不同设备和屏幕尺寸的网页和应用程序的设计方法。它具有许多优点，但也存在一些潜在的缺点。下面是响应式设计的优点和缺点的总结：
优点：
适应多种设备和屏幕尺寸：响应式设计使网站和应用程序能够在不同设备上提供一致的用户体验，包括电脑、平板、手机等。
维护简单：相对于为每个设备和屏幕尺寸创建单独的版本，响应式设计减少了开发和维护的工作量，因为你只需要维护一个代码库。
更好的SEO：响应式设计有助于提高搜索引擎优化（SEO），因为网站内容的一致性可以提高搜索引擎排名。
改进用户体验：响应式设计可以提供更好的用户体验，因为它允许内容适应不同屏幕尺寸，无需用户手动缩放。
节省成本：相对于为每个设备构建独立的应用，响应式设计可以节省开发和维护成本。
支持未来设备：随着新设备和屏幕尺寸的出现，响应式设计可以更轻松地适应未来的技术。
缺点：
性能问题：响应式设计可能导致性能问题，因为在加载时可能需要下载不必要的资源，这可能影响页面加载速度。
复杂性：创建复杂的响应式布局可能需要更多的HTML和CSS代码，可能增加开发的复杂性。
不适合所有情况：对于某些特定的应用程序，响应式设计可能不是最佳选择，因为它可能无法提供所需的用户体验。
测试难度：测试响应式设计需要在多个设备和浏览器上进行测试，这可能会增加测试的复杂性。
潜在兼容性问题：在一些旧版本的浏览器中，响应式设计可能存在兼容性问题，需要额外的代码来解决。
网站响应式设计模式 第3篇
可以通过 标签设置移动端视口的大小和缩放。
如果不设置视口的尺寸，移动设备通常会自动优化网页的显示。在iOS系统上视口默认为980px宽。如果你希望实现更加复杂合理的优化，通常需要修改移动设备的默认视口设置。
设置视口属性的语法是：
viewport包含6个属性：
视口的常规设置方法：
警告：1. 将 user-scalable值设置为 0（与否相同）违反了《Web 内容可访问性指南》 Web Content Accessibility Guidelines (WCAG)。2. 使用 user-scalable=no 可能会给有视力障碍（例如低视力）的用户带来可访问性问题。 WCAG 要求至少 2 倍缩放；但是，最佳做法是启用 5 倍变焦