导读
- 响应式网页设计是什么
- 实现响应式网页设计的技术手段
- 案例
- Viewport
- viewport是什么
- 设置viewport
- Media Query
- Media Query是什么
- 设置Media Query的三种用法
- 媒体查询的语法
- 常见媒体类型
- 常见媒体特性
- 常见逻辑运算符
- 媒体查询示例
响应式网页设计是什么
定义：
响应式网页设计就是让网页具备根据设备应用css样式的能力。
解释：
- 响应式网页设置的英文：
- 设计：设想、计划。设计就是是实现想法。
- 网页设计：按照一定的设计思路布局网页内容。
- 传统网页设计：都是针对PC端浏览器而设计的。
- 传统的网页设计弊端 ：在移动互联网时代，传统的页面设计不适合小屏幕展示。响应式网页设计应运而生。
- 响应式网页设计是一种设计网页的思想/方法。
- 响应：指让我们的网页能够自动查询用户的访问设备，并根据查询结果应用不同的css样式。
实现响应式网页设计的技术手段
第一种： 通过css判断用户设备。
1.设置视口
2.设置媒体查询：使用Media Query判断用户设备。
第二种：通过js判断用户设备。
1.视口
2.使用js判断用户访问设备
案例
非响应式网页设计案例
响应式网页设计：媒体查询
技术: 视口+媒体查询+1个html+多套样式
响应式网页设计：适配
技术：视口+JS判断+多个html+1套样式
vieport是什么
定义：
viewport就是视口的意思，指移动端喧染网页的区域。
解释：
view: 是“看”的意思
port: 是“端口”的意思
viewport: 翻译为“视口”
viewport是没有大小的。就是viewport不等于网页可见区域的大小。
视口可以通过
meta标签设置在进行响应式网页设计的时候，第一步就是设置视口，即把渲染页面的视口尺寸设置为与设备的可见区域的尺寸一致。
设置viewport的主要目的是为了创建更合理的视口尺寸。设置视口是制作响应式网页的第一步。
视口是 HTML 5 中的元元素，用于根据用户的设备缩放内容。这对于响应式网页设计很重要
PC端视口：指网页的可见区域。移动端的视口与PC端的视口有所不同：
| 浏览器界面 | 移动端 | PC端 |
|---|---|---|
| 视口定义 | 渲染页面的区域 | 网页的可见区域 |
| 可见区域 | 视口不等于可见区域 | 视口等于可见区域 |
| 视口交互 | 1. 在屏幕上移动页面会出现视觉反馈条2.更改视口比例：双击、捏合、捏开（不能更改大小)3.可以设置网页的视口属性 | 通过调整窗口大小改变视口大小 |
设置viewport
可以通过<meat>标签设置移动端视口的大小和缩放。
如果不设置视口的尺寸，移动设备通常会自动优化网页的显示。在iOS系统上视口默认为980px宽。如果你希望实现更加复杂合理的优化，通常需要修改移动设备的默认视口设置。
设置视口属性的语法是：
<meat name='viewport' content='宽度/高度 初始比例 最大比例 最小比例 是否缩放'>
viewport包含6个属性：
1.width设置视口的宽度。属性值：
- number：1- 10000。数字表示视口的像素宽度，无单位，不支持负值。比如width=600
- device-width：等于100vw或100%。
<meat name = 'viewpor' content = 'width = 375'>
2.height设置视口的高度。属性值：
- number：1- 10000。数字表示视口的像素高度，无单位，不支持负值。比如height=600
- device-height：等于100vw或100%。
<meat name = 'viewpor' content = 'height = 375'>
注意：如果不设置视口，那么ios的视口默认为980px宽
示例：属性值为数值，无单位。表示视口的宽度为375px
示例：属性值为device-width。表示视口的宽度设置为设备可视区域宽。
<meat name = 'viewpor' content = 'width = device-width'>
3.initial-scale：控制第一次加载页面时的缩放级别。属性值：
- 0.1 - 10
- 默认值：1。
- 负值：忽略。
- 0.1 - 1：表示缩放
- 1 - 10：表示放大
<meta name="viewport" content="initial-scale:1" />
4.minimum-scale：控制页面上允许的缩小程度。属性值：
- 0.1 - 10
- 默认值：0.1。
- 负值：忽略。
<meta name="viewport" content="minimun-scale:2" />
5.maximum-scale：控制页面允许放大多少。属性值
- 0.1- 10。
- 任何小于 3 的值都无法访问。
- 默认值：10。
- 负值：忽略。
<meta name="viewport" content="maxinum-scale:6" />
6.user-scalable：控制页面上是否允许放大和缩小操作。属性值:
- 有效值：0、1、no 或 yes。
- 默认值：1，与 yes 相同。
<meta name="viewport" content="user-scalable:yes" />
视口的常规设置方法：
<meta name="viewport" content="width=device-width, initial-scale=1" />
警告：1. 将 user-scalable值设置为 0（与否相同）违反了《Web 内容可访问性指南》 Web Content Accessibility Guidelines (WCAG)。2. 使用 user-scalable=no 可能会给有视力障碍（例如低视力）的用户带来可访问性问题。 WCAG 要求至少 2 倍缩放；但是，最佳做法是启用 5 倍变焦
Media Query是什么
- Media Query的中文：媒体查询
- 媒体查询是一种查询访问设备的技术。可以查询访问设备的类型和特性，根据媒体查询的结果应用不同的CSS样式。
媒体查询是什么
媒体查询是一种查询用户设备的技术
媒体查询是由media属性和@media规则构成。有以下三种用法，都可以实现相同效果
第一种：通过为<link>标签设置media属性定位媒体，例如
<link href="css/style1.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style2.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="phone.css" rel="stylesheet" media="screen and (max-width: 600px)" />
第二种：或通过为<style>标签设置media属性定位媒体，例如：
<style type="text/css" media="screen">
@import url("./css/style.css");
</style>
第三种：或通过@media规则在CSS文件中定位媒体，例如
/*css文件*/
@media not|only 媒体类型 and (媒体特性表达式) {
CSS-Code;
}
媒体查询的语法
媒体查询通过可选的媒体设备和可选的媒体特性表达式组成
每个媒体特性表达式必须用括号括起来。
-
媒体设备和媒体特性表达式之间使用逻辑运算符连接
andnotonly,
媒体查询不区分大小写。
通过媒体查询，我们可以查询到用户设备类型和设备特性
-
常见设备类型
all： 所有媒体设备。
print：打印机
speech：屏幕阅读设备
screen：计算机屏幕、平板屏幕、智能手机屏幕等设备屏幕。
handle：手持设备
逻辑运算符
逻辑运算符 not、and 和 only 可用于组成复杂的媒体查询。您还可以通过用逗号分隔多个媒体查询将它们组合成一个规则。
and :用于将多个媒体特征组合到一个媒体查询中，要求每个链接的特征返回 true 以使查询为 true。它还用于将媒体功能与媒体类型连接起来。
not: 用于否定媒体查询，如果查询将返回 false，则返回 true。如果出现在逗号分隔的查询列表中，它只会否定应用它的特定查询。如果使用 not 运算符，还必须指定媒体类型。
only:仅当整个查询匹配时才应用样式。它对于防止旧浏览器应用选定的样式很有用。当不只使用时，旧浏览器会将查询屏幕和 (max-width: 500px) 解释为屏幕，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only 运算符，则还必须指定媒体类型。
,: 逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，则整个媒体语句返回真。换句话说，列表的行为类似于逻辑或运算符。
示例：查询屏幕设备+特性
@media screen and (min-width: 30em) and (orientation: landscape) {
/* … */
}
示例：反向查询设备和特性（not 关键字不能用于否定单个特征查询，只能用于否定整个媒体查询)
@media only screen and (color) {
/* … */
}
媒体查询示例
一、最大宽度Max Width
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。
二、最小宽度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。
知识点
1.记住背景属性
2.什么是响应式网页设计
3.物理像素是什么
4.逻辑像素是什么
5.像素比是什么（像素比 = 物理像素 / 逻辑像素）
6.如何查询像素比。
7.如何查询你手机屏幕的逻辑像素（逻辑像素 = ）
复习
JS的三个组成部分
- ECMASicript：ES
- DOM：文档对象模型
- BOM：浏览器对象模型：就是一些于浏览器有关的方法的集合。让你通过这
window.devicePixelRatio
- device: 像素
- Pixel: 比例
- Ratio：dpr
