本篇文章给大家谈谈前端框架自适应，以及前端框架自适应对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
页面里有两个 div，开始的时候宽度都是 800px，当我们将浏览器窗口的宽度拖动到小于 800px 的时候，我们发现：上面的 div 宽度固定，一部分被隐藏在屏幕外；下面 div 的宽度会自动适应 屏幕宽度缩小 的变化。
我们把这种元素的宽或高，能够随着屏幕的宽高变化而变化的能力，叫做宽高自适应。
下面，我们就通过代码来实现元素的宽高自适应。
创建文件 adaptive.html 文件和 adaptive-style.css 文件。在 html 里构建基本代码，引入外部样式。
CSS* { box-sizing: border-box; margin: 0; padding: 0;}
在浏览器里打开页面，当我们上下缩放浏览器窗口时，发现 body 的高度自适应窗口高度的变化。再举个例子：
回到 html，添加元素 div，定义类属性 box。
回到浏览器，我们看，容器水平居中，这是因为 margin: auto 样式会使外边距均分水平方向剩余的空间，这个知识我们前面已经学过了。
当我们水平拖拽浏览器窗口时，发现容器一直位于页面中间。可当浏览器窗口宽度小于容器宽度时，容器超出了 body，出现了水平滚动条。
再看一下效果，无论我们怎么拖拽窗口，容器的宽度一直是 body 宽度的一半，做到了宽度自适应。
效果显示，容器横向不再铺满整个屏幕了。缩小容器宽度，当低于 800px 时，容器仍然可以自适应宽度。
同理，也可以添加一个 max-height: 800px，定义最大伸缩高度。
这样，缩放窗口时，容器就只在 800 x 800 的空间内缩放了。
我们看，容器随着窗口缩小到 600 x 600，就不再缩小了。
以上是关于前端框架自适应的相关信息，了解更多关于内容请继续关注本站。
