ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである.随着科技的进一步发展，一批又一批的新的电子产品不断出世，人们浏览网页的主要载体从电脑变成了各式各样的智能手机或平板，所以，现在设计页面就会有一个直接的需求就是要求你的页面能够适应各种手机的尺寸，对于不同的尺寸能做出调整，在不同尺寸的屏幕里都能很好得显示自己的网页的内容。这就是响应式设计。
这个知识点看起来很难，但其实操作起来却非常简单。只需要做以下的准备就可以实现响应式了。
PS:以下知识点更加针对跨设备的页面显示，（电脑–>手机）
第一步，基础配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这里声明了一些设备的基本配置，声明显示窗口的宽度(width)就是客户端的屏幕宽度(device-width)，然后是后面的initial-scale,表示显示的文字和图形的初始比例为1.0倍。
除此之外，它还有属性
-
height: 与上面的width一样，指定窗口的高度，值可以是一个数字，也可以是 device-height -
minimum-scale：最小缩放倍率 -
maximum-scale： 最大缩放倍率 -
user-scalable: 有俩属性值yesno（不需要添加引号），规定是否可以修改缩放倍率 -
target-densitydpi：规定每英寸像素点的数量，Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。所以，target-densitydpi它有如下属性值------ low-dpi - 中等像素密度和高像素密度设备相应放大，
- medium-dpi - 高像素密度设备相应放大， 像素密度设备相应缩小，这也是浏览器的默认配置。
- high-dpi - 中等像素密度和低像素密度设备相应缩小。
- device-dpi - 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放
- 自己指定一个值，表示一英寸中像素点的数量，但是，这个值必须在 70-400之间
PS：以上配置针对针对不同尺寸的手机版网页，不针对不同尺寸的电脑屏幕！
第二步，开始写响应式
你没有猜错，第二步就开始了 ，响应式还是很简单的。
先写一个简单的例子
<body>
<div class="demo">页面内容-01</div>
</body>
body {
background-color: lightpink;
}
.demo {
color: white;
width: 300px;
margin: 20% auto;
font-size: 45px;
}
现在，打开浏览器，它是这样的
然后，我们在css代码中添加响应式的内容
body {
background-color: lightpink; /* 浅粉色 */
}
.demo {
color: white;
width: 300px;
margin: 20% auto;
font-size: 45px;
}
@media screen and (max-width: 1000px) {
body {
background-color: #80aa86; /* 淡绀色 */
}
}
新添加的代码的意思就是在屏幕宽度不大于1000px的时候采用下面的css样式，(其实是这响应式代码放在下面，在宽度小于1000的时候开始发挥作用，此时body获得两份关于背景颜色的样式，但是，只采用最下面的样式，所以，这样就会顶替掉上面的内容，也就是说如果把这个响应式的代码放到body的上面，这个响应式就不会发挥任何作用)
想要解决这个问题，就可以这么写
.demo {
color: white;
width: 300px;
margin: 20% auto;
font-size: 45px;
}
@media screen and (max-width: 1000px) {
body {
background-color: #80aa86; /* 淡绀色 */
}
}
@media screen and (min-width: 1000px) {
body {
background-color: lightpink; /* 浅粉色 */
}
}
这样就可以实现无缝切换！
下面是显示效果
到这里，肯定有小伙伴来问，哎！我可以理解后面的最小宽度，最大宽度，但是前面的screen要这么理解呢？
其实是这样的，在我一开始学的时候，我没有在意它，直到我点击了打印网页这个选项，发现待打印的网页中的css样式全部消失了，这就是因为我们没有指定待打印设备中的网页的样式，只是指定了显示设备中的样式。
如图所示，页面里面的样式在打印机设备中没有任何朊用，所以需要添加
@media print {
.demo {
color: red;
width: 300px;
margin: 20% auto;
font-size: 45px;
}
}
除了显示屏和打印设备，还有其他设备可以指定。
-
all 所有设备
-
braille 盲文
-
embossed 盲文打印
-
handheld 手持设备
-
projection 项目演示，比如幻灯片
-
speech 演讲
-
tty 固定字母间距的网格的媒体，比如电传打字机
-
tv 电视
虽然用处可能会很小，但是为了用户体验和无障碍设计，这又是必不可少的。
当然，也可以使用only指定唯一的设备，使用and来添加并列判断条件，使用not来排除条件。(一般一个 @media 选择支指定一种设备，然后，使用 and not 判断条件来判断当前设备的宽高来决定是否是否其中的css样式。
@media only print {
/* 只是指定打印机设备 */
.demo {
color: red;
width: 300px;
margin: 20% auto;
font-size: 45px;
}
}
最终产生的效果。
总结
----不要嫌弃响应式麻烦，觉得只要网页在自己的显示屏显示正常就可以了，网页这个东西写出来就是要让大家看的，如果不同的设备都无法正常显示的话那做网页还有什么意义呢？
----上面的内容只是响应式设计的一部分，主要是针对不同性质设备的跨设备适应。还有针对不同尺寸和不同窗口大小的响应式设计。就希望大家设计网页的时候多多考虑，优化排版，把网页的韧性强化到最大！~