响应式网页设计

导读

定义： 响应式网页设计就是让网页具备根据设备应用css样式的能力。 解释：

第一种： 通过css判断用户设备。 1.设置视口 2.设置媒体查询：使用Media Query判断用户设备。

第二种：通过js判断用户设备。 1.视口 2.使用js判断用户访问设备

非响应式网页设计案例

响应式网页设计：媒体查询 技术: 视口+媒体查询+1个html+多套样式

响应式网页设计：适配 技术：视口+JS判断+多个html+1套样式

定义： viewport就是视口的意思，指移动端喧染网页的区域。 解释：

view: 是“看”的意思

port: 是“端口”的意思

viewport: 翻译为“视口”

viewport是没有大小的。就是viewport不等于网页可见区域的大小。

视口可以通过meta标签设置

在进行响应式网页设计的时候，第一步就是设置视口，即把渲染页面的视口尺寸设置为与设备的可见区域的尺寸一致。

设置viewport的主要目的是为了创建更合理的视口尺寸。设置视口是制作响应式网页的第一步。

视口是 HTML 5 中的元元素，用于根据用户的设备缩放内容。这对于响应式网页设计很重要

PC端视口：指网页的可见区域。移动端的视口与PC端的视口有所不同：

可以通过标签设置移动端视口的大小和缩放。

如果不设置视口的尺寸，移动设备通常会自动优化网页的显示。在iOS系统上视口默认为980px宽。如果你希望实现更加复杂合理的优化，通常需要修改移动设备的默认视口设置。

设置视口属性的语法是：

viewport包含6个属性： 1.width设置视口的宽度。属性值：

2.height设置视口的高度。属性值：

注意：如果不设置视口，那么ios的视口默认为980px宽

示例：属性值为数值，无单位。表示视口的宽度为375px

示例：属性值为device-width。表示视口的宽度设置为设备可视区域宽。

3.initial-scale：控制第一次加载页面时的缩放级别。属性值：

4.minimum-scale：控制页面上允许的缩小程度。属性值：

5.maximum-scale：控制页面允许放大多少。属性值

6.user-scalable：控制页面上是否允许放大和缩小操作。属性值:

视口的常规设置方法：

警告：1. 将 user-scalable值设置为 0（与否相同）违反了《Web 内容可访问性指南》 Web Content Accessibility Guidelines (WCAG)。2. 使用 user-scalable=no 可能会给有视力障碍（例如低视力）的用户带来可访问性问题。 WCAG 要求至少 2 倍缩放；但是，最佳做法是启用 5 倍变焦

媒体查询是一种查询用户设备的技术

媒体查询是由media属性和@media规则构成。有以下三种用法，都可以实现相同效果

第一种：通过为标签设置media属性定位媒体，例如

第二种：或通过为标签设置media属性定位媒体，例如：

第三种：或通过@media规则在CSS文件中定位媒体，例如

媒体查询通过可选的媒体设备和可选的媒体特性表达式组成

每个媒体特性表达式必须用括号括起来。

媒体设备和媒体特性表达式之间使用逻辑运算符连接

媒体查询不区分大小写。

通过媒体查询，我们可以查询到用户设备类型和设备特性

常见设备类型

all： 所有媒体设备。

print：打印机

speech：屏幕阅读设备

screen：计算机屏幕、平板屏幕、智能手机屏幕等设备屏幕。

handle：手持设备

逻辑运算符 not、and 和 only 可用于组成复杂的媒体查询。您还可以通过用逗号分隔多个媒体查询将它们组合成一个规则。

and :用于将多个媒体特征组合到一个媒体查询中，要求每个链接的特征返回 true 以使查询为 true。它还用于将媒体功能与媒体类型连接起来。

not: 用于否定媒体查询，如果查询将返回 false，则返回 true。如果出现在逗号分隔的查询列表中，它只会否定应用它的特定查询。如果使用 not 运算符，还必须指定媒体类型。

only:仅当整个查询匹配时才应用样式。它对于防止旧浏览器应用选定的样式很有用。当不只使用时，旧浏览器会将查询屏幕和 (max-width: 500px) 解释为屏幕，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only 运算符，则还必须指定媒体类型。

,: 逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，则整个媒体语句返回真。换句话说，列表的行为类似于逻辑或运算符。

示例：查询屏幕设备+特性

示例：反向查询设备和特性（not 关键字不能用于否定单个特征查询，只能用于否定整个媒体查询)

一、最大宽度Max Width

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。

二、最小宽度Min Width

上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

1.记住背景属性 2.什么是响应式网页设计 3.物理像素是什么 4.逻辑像素是什么 5.像素比是什么（像素比 = 物理像素 / 逻辑像素） 6.如何查询像素比。 7.如何查询你手机屏幕的逻辑像素（逻辑像素 = ）

JS的三个组成部分