# 响应式设计（媒体查询）
让一套代码可以在多个终端中适配。一套代码解决所有设备的显示问题。即只写一套代码，在多个终端到处运行。终端：PC 端、移动端端、手表、智能眼镜等。
就像写 if 语句那样：
1
2
3
4
5
6
7
8
9
| if(屏幕大小是768以下){
}
if(屏幕大小>769&& 小于1024时){
}
if(大于1024时){
}
|
# viewport
视口：用户网页的可视区域（即浏览器屏幕大小）。
在 head 中添加 viewport，用来兼容移动设备的显示效果，这样能使不同的移动终端显示的比例都差不多，也就是 16 像素的字在无论在小屏还是大屏下都能看得清，并且文字大小是根据等比例缩放的。
也就是设置了 viewport 后，网页就以浏览器窗口（屏幕大小）来显示宽高。
1
2
3
4
5
6
7
8
9
10
11
12
|
<meta name="viewport" content="width=device-width,initial-scale=1" >
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" >
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。一般不写
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
|
# 媒体查询
如果要实现响应式开发，需要解决 4 个问题：
- 添加 viewport
- 内容布局：之前学习的，包括弹性布局
- 图片自适应。可以设置图片大小为 100%
- 媒体查询
概念：
媒体查询可用于检测很多事情，例如检测屏幕的类型，尺寸大小，朝向分辨率等：
a、检测 viewport (视窗) 的宽度与高度
(max-width:600px)
b、朝向 (智能手机横屏，竖屏) 。
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
- 第一种写法，在样式内部写 @media，相当于是学习 css 版的 if 语句，可以认为是特殊的选择器，只会在满足条件的屏幕下生效。
1
2
3
4
5
6
7
8
9
10
11
12
|
if(screen && min-width=768px &&){
}
@media screen and (min-width:768px) and (max-width:1024px){
.demo{
color:red;
}
}
|
- 如果是 PC 端导入 PC 端的样式文件，如果是手机端导入手机端样式文件，即按需导入，则需要了解第二种写法
1
2
3
4
| <!-- ipad -->
<link rel="stylesheet" href="css/ipad.css" media='screen and (min-width: 768px) and (max-width: 1024px)'>
<!-- iphone -->
<link rel="stylesheet" href="css/iphone.css" media='screen and (max-width: 767px)'>
|
- 检测横竖屏的条件如何写：
1
2
3
4
5
6
7
8
9
10
11
| 朝向 (智能手机横屏，竖屏) 。
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
//竖屏
@media screen and (orientation:portrait) {
竖屏的样式代码
}
//横屏
@media screen and (orientation:landscape){
横屏的代码
}
|
参考资料：
- 物理像素、独立像素、css 像素 https://www.jianshu.com/p/93ffb715aeff
- viewport http://www.runoob.com/w3cnote/viewport-deep-understanding.html
# 响应式设计实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 后期移动端流行的时候，使用打补丁的方式添加了一个Vieport标签，用来支持移动端的开发
该标签在PC端没有任何影响，只有在移动端才会有效果。
加了的作用：
就是给浏览器下达一个指令，告诉他不再以默认的980px来显示网页了，而是一设备当前的屏幕宽度来显示我的网页（即一一种理想的分辨率来显示页面）
device-width 指的是当前设备的宽度,相当于是一个变量
也可以写一个固定的宽度：比如400，此时所有的移动端设备的屏幕宽度都改为了400px
最简单的写法：
<meta name="viewport" content="width=device-width" >
initial-scale=1 初始屏幕缩放比为1，不放大，也不缩小
可以添加以下3个属性禁止用户缩写屏幕
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
-->
<!-- 最全的写法：完整版，推荐写法
学的目的：只要是移动端开发，就需要添加这行代码。
-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" >
<title>Document</title>
<style>
/*当屏幕宽度小于767以下，手机端*/
@media screen and (max-width: 767px) {
div{
color: green;
}
}
/*当屏幕宽度介于768-1024之间
这里写了3个条件
1、screen
2、(min-width:768px)
3、(max-width:1024px)
*/
@media screen and (min-width:768px) and (max-width:1024px){
div{
color: red;
}
}
/*屏幕大小大于等于1025时*/
@media screen and (min-width:1025px){
div{
color: blue;
}
}
/*响应式主要是写布局代码，给布局做适配
先把PC端的样式写好，再根据不同的设备做不同的布局适配，即写布局的重置代码即可。
*/
</style>
</head>
<body>
<div>
当屏幕在768以下时文字显示为绿色，<br>
屏幕在768以上，1024以下时，显示红色<br>
屏幕在1024以上时显示蓝色
</div>
</body>
</html>
|
