流式布局（百分比布局）
使用百分比、相对单位（如 em、rem）等来设置元素的宽度，使页面元素根据视口大小的变化进行调整。这种方法可以实现基本的自适应效果，但可能在不同设备上显示不一致。
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.box {
width: 100%;
height: 200px;
background-color: #e0e0e0;
margin-bottom: 20px;
}
@media (min-width: 768px) {
.box {
width: 50%;
}
}
@media (min-width: 1024px) {
.box {
width: 33.33%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
flex弹性布局（强烈推荐）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Flexbox Layout Example</title>
</head>
<body>
<div class="container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
</div>
</body>
</html>
/* styles.css */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex; /* 使用 Flexbox 布局 */
justify-content: space-between; /* 在主轴上均匀分布元素 */
align-items: center; /* 在交叉轴上居中对齐元素 */
padding: 20px;
}
.box1{
background-color: aqua;
width: 10%;
}
.box2{
background-color:brown;
flex: 1;
}
.box3{
background-color: blue;
width: 10%;
}
rem+媒体查询布局
rem基础
rem(root em)是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素(html)设置font-size=12px，非根元素设置width:2rem;则换成px表示就是24px。
em相对于父元素的字体大小来说的
rem相对于html元素字体大小来说的
rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。
媒体查询
媒体查询(Media Query)是CSS3新语法。
· 使用@media查询，可以针对不同的媒体类型定义不同的样式
· @media可以针对不同的屏幕尺寸设置不同的样式
· 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
· 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
语法规范：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询案例背景变色</title>
<style>
/* 1.媒体查询一般按照从大到小或者从小到大的顺序来 */
/* 2.小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 540~970 我们的页面颜色改为绿色 */
@media screen and (min-width: 540px) and (max-width:969px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为红色 */
@media screen and (min-width: 970px) {
body {
background-color: pink;
}
}
/* 5. screen 还有and必须带上不能省略 */
/* 6. 我们的数字后面必须跟单位 970px 这个px不能省略 */
</style>
</head>
<body></body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询+rem案例</title>
<style>
/* 从小到大顺序 */
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
div {
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div>实例</div>
</body>
</html>响应式布局：bootstrap
引用：