流式布局中，body设置了宽度、最大宽度、最小宽度。一般子块级元素不设置宽度都会继承body的宽度，但是当子元素设置为固定定位时position:fixed，元素宽度则根据内容决定宽度，所以要记得给固定定位元素加上宽度。因为fixed父元素是html，所以也要给固定定位加上最大最小宽度，否则固定定位元素随着html无线扩大和缩小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scale=1.0,maximum-scale=1.0,minimum-scele=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>固定定位</title>
<style>
body {
margin: 0 auto;
width: 100%;
min-width: 324px;
max-width: 640px;
}
.header {
position: fixed;
height: 35px;
background-color: pink;
}
</style>
</head>
<body>
<div class="header">
1213
</div>
</body>
</html>
效果如图
image.png
给.header加上宽度100%
.header {
position: fixed;
height: 35px;
background-color: pink;
width: 100%;
}
结果如下：
image.png
给.header再加上最大最小宽度
.header {
position: fixed;
height: 35px;
background-color: pink;
width: 100%;
min-width: 324px;
max-width: 640px;
}
结果如下：
image.png
