说明：案例源自慕课网的学习。
关键字：响应式布局、class、component！
什么是响应式布局？
这就得从移动大军崛起之后说起，本来只为PC端浏览器设计的网站在移动端的体验太过恶劣。而且，因为移动端尺寸五花八门，如何适配移动端的浏览器成了一个难题。
好在有了css3-media query，这里不解释它是什么（其实我也不知道），举个例子就明白了。
要求：当浏览器的宽度小于800px的时候，背景色设为红色；其他时候设为蓝色。
实现：
link.css
body {
background: red
}
demo.html
<html>
<head>
<!--外联样式-->
<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:800px)" />
<style>
@media screen and (min-width: 800px) {
body {
background: blue;
}
}
</style>
</head>
<body>
</body>
</html>
现在，使用浏览器打开这个页面，试着改变浏览器的宽度，发现完全满足要求。
也许你会问，我们使用js或者css-media query能实现的功能，为什么还需要bootstrap？
这是因为bootstrap等框架为我们提供了一整套的解决方案，例如形状、配色，甚至组件、动作（事件），这样我们直接拿来使用即可，不必自己费心劳力的去一一寻找、调整。
-- 当然了，如果你是高手，又有足够的经验，喜欢将细节一一掌控，又或者喜欢精简的东西，那也是可以用来参考的啊。
>>>>>>>未完待续
时间： 2024-10-16 15:18:42