提示：本人第一次写博客，内容仅供参考，希望对看到这篇文章的人有所帮助

文章目录

前言

        团队在写项目中经常会遇到不同电脑的屏幕尺寸不一样，导致写出来的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页面在不同的设备自适应布局的内容，经验阅历有限，文章内容仅供参考

# html # 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB数据库高可用部署方案

avatar 华为开发者空间
cover

在华为开发者空间，简单几步带你实现AI风格化编程

avatar 华为开发者空间
cover

GaussDB关键技术原理|高弹性：hashbucket介绍

avatar 华为开发者空间