提示：本人第一次写博客，内容仅供参考，希望对看到这篇文章的人有所帮助
文章目录
- 前言
- 一、什么是自适应布局？
- 二、用什么方法
- 百分比布局
- 三、呈现的效果
- 四、总结
前言
团队在写项目中经常会遇到不同电脑的屏幕尺寸不一样，导致写出来的Html页面在整合的时候会遇到页面不全或者是页面铺不满等各种情况，此时就需要来自适应布局让其适应各种屏幕来自动进行排版
一、什么是自适应布局？
可以自动识别屏幕宽度、并做出相应调整的网页布局。简单来说就是让同一个页面自动适应不同大小的设备。
二、用什么方法
百分比布局（页面有很多种布局方式我写的只是其中一种）
代码如下eg:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{padding: 0;margin: 0;}div{float: left;box-sizing: border-box;}.clear{ clear: both;//清除左右两边浮动}.body {float: none;max-width: 100%;//最大宽度min-height: 480px;//最小高度}.div1, .div2, .div3 {border: 2px solid black;height: 200px;}.div1 {width: 30%;background: red;}.div2 {width: 50%;background: green;}.div3 {width: 20%;background: blue;}</style></head><body class="body clear"><div class="div1"></div><div class="div2"></div><div class="div3"></div></body>
</html>三、呈现的效果
四、总结
以上就是我写的关于如何让Html页面在不同的设备自适应布局的内容，经验阅历有限，文章内容仅供参考
