响应式网页设计 第1篇
逻辑运算符 not、and 和 only 可用于组成复杂的媒体查询。您还可以通过用逗号分隔多个媒体查询将它们组合成一个规则。
and :用于将多个媒体特征组合到一个媒体查询中，要求每个链接的特征返回 true 以使查询为 true。它还用于将媒体功能与媒体类型连接起来。
not: 用于否定媒体查询，如果查询将返回 false，则返回 true。如果出现在逗号分隔的查询列表中，它只会否定应用它的特定查询。如果使用 not 运算符，还必须指定媒体类型。
only:仅当整个查询匹配时才应用样式。它对于防止旧浏览器应用选定的样式很有用。当不只使用时，旧浏览器会将查询屏幕和 (max-width: 500px) 解释为屏幕，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only 运算符，则还必须指定媒体类型。
,: 逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，则整个媒体语句返回真。换句话说，列表的行为类似于逻辑或运算符。
示例：查询屏幕设备+特性
示例：反向查询设备和特性（not 关键字不能用于否定单个特征查询，只能用于否定整个媒体查询)
响应式网页设计 第2篇
良好的用户体验
用户体验是网站运营者最关切的问题之一，因为不管网站运营的目的是什么，首要目标都是要吸引流量并留住用户。如果用户打开网页，但页面显示混乱，或是图片分辨率低、视频加载缓慢，那么用户会觉得网站不专业，降低体验感的同时还很有可能会丧失信任感。响应式网站设计则提供了无缝的用户体验，有助于留住用户，实现网站运营目标，
节省设计开发成本
响应式网站设计可以节约团队设计开发的时间、精力和金钱成本，使设计团队无需再针对不同的设备制作不同的网站。花一份投入，用Pixso轻松创建一个响应式网站设计，就能收获不同设备的体验，实现一稿多用的效果，
改进搜索引擎优化
在SEO方面，响应式网站设计也非常重要，有助于搜索引擎的优化，主要原因有：
流量汇合。响应式网站设计的移动端和PC端都应用同一个网站，更新搜索都同步，这样有利于集中网站流量，增强搜索引擎的排名竞争力。
降低跳失率。浏览体验差的网站很容易导致用户跳失，这样会被认为是效果比较差的检索结果，也不利于搜索排名的提升。
方便同步更新网站
响应式网站设计有助于帮助设计团队快速同步更新网站的数据信息。如果不同端口显示不一致，容易让用户产生网站不专业、不可靠的感觉。尤其是当网站有重大更新时，如果信息没有同步更新，可能会导致网站有重大损失，例如某些电商活动的修改、终止等。
网站变得易于访问
响应式网页设计 第3篇
可以通过 标签设置移动端视口的大小和缩放。
如果不设置视口的尺寸，移动设备通常会自动优化网页的显示。在iOS系统上视口默认为980px宽。如果你希望实现更加复杂合理的优化，通常需要修改移动设备的默认视口设置。
设置视口属性的语法是：
viewport包含6个属性：
视口的常规设置方法：
警告：1. 将 user-scalable值设置为 0（与否相同）违反了《Web 内容可访问性指南》 Web Content Accessibility Guidelines (WCAG)。2. 使用 user-scalable=no 可能会给有视力障碍（例如低视力）的用户带来可访问性问题。 WCAG 要求至少 2 倍缩放；但是，最佳做法是启用 5 倍变焦