响应式网页设计详解(1)

导读

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

知识点

1. 什么是响应式网页设计
2. 物理像素是什么
3. 逻辑像素是什么
4. 像素比是什么 （像素比 = 物理像素 / 逻辑像素 )
5. 如何查询像素比
6. 如何查询你手机屏幕的逻辑像素( 逻辑像素 = 物理像素 / 像素比)
7. viewport是什么
8. 如何设置viewport
9. iOS的视口默认多宽
10. 媒体查询是什么
11. 媒体查询的用法有几种
12. 媒体查询由哪两部分构成
13. 媒体查询的语法是什么
14. 实现响应式网页设计的步骤
15. 媒体查询的逻辑运算符有哪几个
16. 使用min-width和max-width设置断点时的原则是什么？

响应式网页设计是什么

• 响应式网页设计是一种设计网页的方法。
• 这种方法主要使用媒体查询让网页具有根据设备的类型和特点应用CSS样式的能力。

解释：

• 设计：设想、计划。设计就是把想法实现。
• 网页设计：按照一定的想法布局网页内容。
• 传统网页设计：主要针对PC端浏览器而设计，不具备响应设备类型和特性的能力，故不能针对多终端设备和尺寸的网页进行优化。
• 移动互联网时代：随着HTML 5的视口的出现及CSS3的media规则的出现。网页具备了查询访问设备和设备特性的能力，响应式网页设计应用而生。
• 响应：指让我们的网页能够自动查询用户的访问设备，并根据查询结果应用不同的CSS样式。

实现响应式网页设计的步骤

第一步：设置视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

第二步：设置媒体查询：使用Media Query判断用户访问设备，从而应用css样式

案例

非响应式网页设计案例

• w3school

响应式网页设计：媒体查询

• 小米
• 极客公园
• https://dribbble.com
• https://colly.com

响应式网页设计：适配

• 淘宝
• 京东

Viewport是什么

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

• view: 是“看”的意思。
• Port: 是“端口”的意思
• Viewport: 翻译为“视口”。
• viewport是没有大小的。就是viewport不等于网页可见区域的大小。
• 视口可以通过meta标签设置
• 在进行响应式网页设计的时候，第一步就是设置视口，即把渲染页面的视口尺寸设置为与设备的可见区域的尺寸一致。
• 设置viewport的主要目的是为了创建更合理的视口尺寸。设置视口是制作响应式网页的第一步。
• 视口是 HTML 5 中的元元素，用于根据用户的设备缩放内容。这对于响应式网页设计很重要。

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

浏览器界面	移动端	PC端
视口定义	渲染页面的区域	网页的可见区域
可见区域	视口不等于可见区域	视口等于可见区域
视口交互	1. 在屏幕上移动页面会出现视觉反馈条 2.更改视口比例：双击、捏合、捏开（不能更改大小) 3.可以设置网页的视口属性	通过调整窗口大小改变视口大小

设置Viewport

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

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

设置视口属性的语法是：

<meta name="viewport" content="属性列表" /> 

viewport包含6个属性：

1. width：设置视口的宽度。属性值：

• number：1- 10000。数字表示视口的像素宽度，无单位，不支持负值。比如width=600
• device-width：等于100vw或100%。

<meta name="viewport" content="width:320" /> 

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

• number：1- 10000。数字表示视口的像素高度，无单位，不支持负值。比如height=600
• device-height：等于100vw或100%。

<meta name="viewport" content="height:640" /> 

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

• 0.1 - 10
• 默认值：1。
• 负值：忽略。

<meta name="viewport" content="initial-scale:1" /> 

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

• 0.1 - 10
• 默认值：0.1。
• 负值：忽略。

<meta name="viewport" content="minimun-scale:2" /> 

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

• 0.1- 10。
• 任何小于 3 的值都无法访问。
• 默认值：10。
• 负值：忽略。

<meta name="viewport" content="maxinum-scale:6" /> 

1. 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样式。

媒体查询的三种用法

第一种：通过为<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 ： 打印机
• screen : 计算机屏幕、平板屏幕、智能手机屏幕等设备屏幕。
• speech: 屏幕阅读设备

示例：查询打印机设备

@media print {
  /* … */
}

示例：查询多个设备

@media screen, print {
  /* … */
}

媒体特性表达式

媒体特性通过表达式形式描述了用户代理、输出设备或环境的特征。

示例：查询鼠标悬停

@media (hover: hover) {
  /* … */
}

示例：查询视口宽度

@media (max-width: 1250px) {
  /* … */
}

示例：查询彩色屏幕的设备

@media (color) {
  /* … */
}

示例：查询两个特性（and运算符）

@media (min-width: 30em) and (orientation: landscape) {
  /* … */
}

逻辑运算符

逻辑运算符 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页面。

三、多个Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

四、设备屏幕的输出宽度Device Width

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

五、iPhone4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

上面的样式是专门针对iPhone4的移动设备写的。

六、iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。

七、android

/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

八、not关键字

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。

九、only关键字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。

十、其他

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

另外还有使用逗号（，）被用来表示并列或者表示或，如下

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。