响应式网页设计是什么
定义：响应式网页设计就是让网页具备根据设备应用CSS样式的能力
解释：
响应式网页设计英文：Responsive Wed
设计：设想、计划。设计就是实线想法。
网页设计：按照一定的设计思路布局网页内容。
传统网页设计：都是针对PC端浏览器而设计的。
传统网页设计的弊端：不能根据用户设备应用样式。在移动互联网时代，传统的网页设计不适合小屏幕展示。响应式网页设计应运而生。
响应式网页设计是一种设计网页的思想/方法。
响应：指让我们的网页能够自动响应用户代理。并根据查询结果应用不同的CSS样式
实现响应式网页设计的技术手段
第一种：通过CSS判断用户设备。
- 设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 设置媒体查询：使用Media Query判断用户访问设备
第二种：通过JS判断用户设备。
视口
使用JS判断用户访问设备
案例
非响应式网站：
响应式网站：
技术：视口＋媒体查询+1个HTML+多套样式
响应式适配
技术：视口+JS判断+多个HTML+1套样式
Viewport是什么
定义：viewport就是视口的意思，指移动端渲染网页的区域。
解释：
view：是“看”的意思
Port：是“端口”的意思
Viewport：翻译为“视口”。
viewport是没有大小的。就是viewport不等于网页可见区域的大小。
视口可以通过
<meta>标签设置如果没有设置，则按照默认980设置
设置viewport
可以通过<meta>标签设置移动端视口的大小和缩放。它的语法是：
<meta name='viewport' content='宽度/高度 初始比例 最大比例 最小比例 是否缩放'>
五个属性值
1.width/height：设置视口的宽度或高度。
注意：如果不设置视口，那么iOS的视口默认为980px宽
示例：属性值为数值，无单位。表示视口的宽度为375px
<meta name='viewport' content='width=375'>
示例：属性值为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规则构成。以下三种用法，都可以实现相同的效果。medla属性设置在<style>标签上meala属性可以设置在<link>标签上@meida规则设置在样式表里
通过媒体查询，我们可以查询到用户设备类型和设备特性。
-
常见设备类型
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>
复习JS
js的三个组成部分
ECMAScript：ES
DOM：文档对象模型：就是一些文档方法的集合。让你通过这些方法可以操作文档。
BOM：浏览器对象模型：就是一些与浏览器有关的方法集合。让你通过这些方法可以操作浏览器窗口。
window.devicePixelRatio
device：设备
Pixel：像素
Ratio：比例
devicePixelRatio：设备像素比
