如何让Html页面在不同的设备自适应布局
关于页面的布局
·
提示：本人第一次写博客，内容仅供参考，希望对看到这篇文章的人有所帮助
前言
团队在写项目中经常会遇到不同电脑的屏幕尺寸不一样，导致写出来的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页面在不同的设备自适应布局的内容，经验阅历有限，文章内容仅供参考
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)