自适应布局
一、自适应布局--网页适配各种大小的屏幕
引用淘宝开源的适配文件 font.js
<script src="font.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 1rem;
height: 1rem;
background-color: pink;
}
</style>
<body>
<div class="main"></div>
</body>
二、双飞翼布局
这种布局两边栏固定不动，中间一栏随着屏幕大小而变化，并且先加载中间这一栏的内容，所以布局中把中间一栏放在中间
<body>
<div class="main">
<div class="content">
<div class="cen">中</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.main>div{
float: left;
}
.left{
width: 100px;
background-color: pink;
margin-left: -100%;
}
.right{
width: 100px;
background-color: #1CCACD;
margin-left: -100px;
}
.content{
background-color: orange;
width: 100%;
}
.cen{
padding-left: 100px;
}
</style>
