移动端布局主要分为固定布局和流动布局(响应式布局），固定布局即使用固定单位如px,响应式布局则使用相对单位来使布局适应不同设备，有：
<!-- px % vh vw em rem -->
1、 固定像素
.fu {
width: 500px;
height: 500px;
background-color: #ccc;
font-size: 40px;
}
.zi {
width: 200px;
height: 200px;
background-color: #0f0;
}
2、相对于父级的百分比
.zi {
width: 50%;
height: 50%;
background-color: #0f0;
}
3、vw：可视区域宽度 vh:可视区域高度
.fu {
width: 100vw;
height: 100vh;
}
无论放大缩小，均占可视窗口的百分比
4、em 父元素 的字体大小*倍数
.fu{
font- size:14px
}
.zi {
width: 20em;
height: 20em;
background-color: #0f0;
}
则子元素宽高为280px
5、rem 根元素字体大小*倍数
与em相似
html {
font-size: 50px;
}
.zi {
width: 2rem;
height: 2rem;
background-color: #0f0;
}
子元素宽高为100px
媒体查询
@media 设备 and (区间) and (区间){}
@media screen and (max-width:1600px) and (min-width:1000px) {
}
设备：
all 所有设备
screen 移动设备 手机 平板 电脑 笔记本
speech 阅读器
print 打印机
width/height
device-width/device-height 设备宽高
orientation-width/orientation-height 屏幕：横屏/竖屏
例：
HTML:
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
CSS:
.left {
width: 30%;
height: 100px;
background-color: #0f0;
}
.center {
width: 60%;
height: 100px;
background-color: #f00;
}
.right {
width: 10%;
height: 100px;
background-color: #00f;
}
.box {
display: flex;
}
@media screen and (min-width:1200px) and (max-width:1600px) {
.left {
width: 20%;
height: 100px;
background-color: orange;
}
.center {
width: 50%;
height: 100px;
background-color: orchid;
}
.right {
width: 30%;
height: 100px;
background-color: palevioletred;
}
}
@media screen and (min-width:400px) and (max-width:800px) {
.left {
width: 10%;
height: 100px;
background-color: #ccc;
}
.center {
width: 30%;
height: 100px;
background-color: #0f0;
}
.right {
width: 60%;
height: 100px;
background-color: #f00;
}
}屏幕适配
为了适配各种型号屏幕，通常在 html根标签中写：
html{
font-size: calc(100vw / x);
}
x为所画页面的宽度，带入式内无单位，这样可以完成对不同尺寸屏幕的适配
标签：0f0,width,color,布局,100px,height,响应,background,移动 From： https://blog.csdn.net/clp20031101/article/details/144674987