如何让Html页面在不同的设备自适应布局

‍‪‍‍‍‏HideInTheNight

已于 2022-09-11 18:58:45 修改

阅读量3.6k

点赞数 5

分类专栏：页面布局文章标签： html 前端

于 2022-09-11 18:48:15 首次发布

本文链接：https://blog.csdn.net/qq_61820657/article/details/126806308

版权

页面布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

文章目录

前言
一、什么是自适应布局？
二、用什么方法
- 百分比布局
三、呈现的效果
四、总结

前言

团队在写项目中经常会遇到不同电脑的屏幕尺寸不一样，导致写出来的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>