定义：
响应式网页设计就是让网页具备根据设备应用CSS样式的能力。
解释：
- 响应式网页设计的英文：
- 网页设计：按照一定的设计思路布局网页内容。
- 传统网页设计：都是针对PC端浏览器而设计的。
- 传统网页设计的弊端：不能根据用户设备应用样式。在移动互联网时代，传统的网页设计不适合小屏幕展示。
- 响应式网页设计是一种设计网页的思想/方法。
- 响应：指让我们的网页能够自动查询用户的访问设备，并根据查询结果应用不同的CSS样式。
实现响应式网页设计的步骤
第一步：设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
实现响应式网页设计的技术手段
第一种：通过CSS判断用户设备
- 视口
- 设置媒体查询：使用Media Query判断用户访问设备
第二种：通过JS判断用户设备
- 视口
- 使用js判断用户访问设备
案例
非响应式网站：
响应式网站
技术：视口+媒体查询+1个html+多套样式
响应式适配
技术：视口+js判断+多个html+1套样式
viewport是什么
定义
viewport就是视口的意思，指移动端渲染网页的区域。
解释：
- view：是“看”的意思。
- Port：是“端口”的意思。
- Viewport：翻译为“视口”。
- viewport是没有大小的。就是viewport不等于网页可见区域的大小。
设置viewport
可以通过<meta>标签设置移动端视口的大小和缩放。它的语法是：
<meta name='viewport' content='宽度/高度 初始比例 最大比例 最小比例 是否缩放'>
五个属性值
1.width/height：设置视口的宽度或高度。
注意：
示例：属性值为数值，无单位。表示视口的宽度为375px
<meta name='viewport' content='375px'>
示例：属性值为device-width，无单位。表示把视口的宽度设置为设备可视域宽。
<meta name='viewport' content='width=device-width'>
2.initial-scale:设置视口的初始比例。
语法:
<meta name='viewport' content='width=device-width, initial-scale=1'>
属性值：0.1-1
默认值：1
0.1-1：表示缩小
1-10：表示放大
3.maximum-scale：设置视口最大缩放比
<meta name="viewport" content="width=device-width,initial-scale=1，minimum-scale=1,maximum-scale=10" />
4minimum-scale：设置视口最小缩放比
<meta name="viewport" content="width=device-width,initial-scale=1，minimum-scale=2" />
5user-scalable：设置视口是否允许缩放
<meta name="viewport" content="width=device-width,initial-scale=1，minimum-scale=1,maximum-scale=5,user-scalable=0" />
| 参数 | 注释 |
|---|---|
| user-scalable=0/1 | 0相当于no，1相当于yes |
媒体查询是什么
- 媒体查询是一种查询用户设备的技术。
- 媒体查询是由
media属性和@media规则构成。有以下三种用法，都可以实现相同的效果。
- 通过媒体查询，我们可以查询到用户设备类型和设备特性。
- 常见设备类型
screen：所有有电子屏幕的设备
print：打印机
speech：阅读器
handle：手持设备
all：所有设备 - 常见设备特性
width
height
orientation
hover
resolution
aspect-ratio
媒体查询的语法
media属性
<style media='查询规则'>
</style>
media属性
<link href='print.css' media='查询规则'>
<link href='screen.css' media='查询规则'>
@media规则
/*CSS文件*/
@media 查询规则{
/*这里写代码*/
}
查询规则
- 查询规则由媒体类型+媒体特性表达式构成。
- 媒体类型和媒体特性表达式使用逻辑操作符(and、not、only、,)连接，操作符前后必须有空格。
- 所有的媒体特性表达性必须用小括号括起来
- 不区分大小写。
示例
/*在横向屏幕设备上，让body的背景色显示为红色*/
/*在竖向屏幕设备上，让body的背景色显示为蓝色*/
/*landscape：横屏*/
@media screen and (orientation:landscape){
body{
background-color:red;
}
}
/*portrait：竖屏*/
@media screen and (orientation:portrait){
body{
background-color:blue;
}
}
/*是否支持输入设备的悬停效果*/
<style media="<hover:hover)">
a:hover{
color:white;
background-color:red
};
</style>
示例：断点修改背景色
/*查询视口范围min，查询max范围将顺序反过来*/
<style>
header,
footer {
background-color: black;
color: #fff;
height: 100px;
}
body{
background-color: blueviolet;
}
@media screen and (min-width:576px){
body{
background-color: blueviolet;
}
}
@media screen and (min-width:768px){
body{
background-color: goldenrod;
}
}
@media screen and (min-width:992px){
body{
background-color: palevioletred;
}
}
@media screen and (min-width:1200px){
body{
background-color: blue;
}
}
@media screen and (min-width:1400px){
body{
background-color: greenyellow;
}
}
</style>
