导读

• 响应式网页设计是什么
• 实现响应式网页设计的技术手段
• 案例
• Viewport
  • viewport是什么
  • 设置viewport
• Media Query
  • Media Query是什么
  • 设置Media Query的三种用法
  • 媒体查询的语法
  • 常见媒体类型
  • 常见媒体特性
  • 常见逻辑运算符
  • 媒体查询示例

响应式网页设计是什么

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

• 响应式网页设置的英文：
• 设计：设想、计划。设计就是是实现想法。
• 网页设计：按照一定的设计思路布局网页内容。
• 传统网页设计：都是针对PC端浏览器而设计的。
• 传统的网页设计弊端 ：在移动互联网时代，传统的页面设计不适合小屏幕展示。响应式网页设计应运而生。
• 响应式网页设计是一种设计网页的思想/方法。
• 响应：指让我们的网页能够自动查询用户的访问设备，并根据查询结果应用不同的css样式。

实现响应式网页设计的技术手段

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

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

案例

非响应式网页设计案例

• w3c
• 网易云音乐

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

• 极客公园

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

• 淘宝
• 京东

vieport是什么

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

• view: 是“看”的意思

• port: 是“端口”的意思

• viewport: 翻译为“视口”

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

• 视口可以通过meta标签设置

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

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

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

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

设置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;
}

媒体查询的语法

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

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

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

  • and
  • not
  • only
  • ,

• 媒体查询不区分大小写。

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

• 常见设备类型

  • 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