版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
流式布局
页面元素的宽度按照屏幕分辨率进行适配调整 ，但整体布局不变。网页中主要的划分 区域的尺寸使用百分数（搭配min-*,max-*属性使用）
特点：
屏幕 分辨率变化时，页面里元素的大小会变化但布局不变。【这会导致如果屏幕太大或太小都会导致元素无法正常显示】
静态布局（PC网站，用来对比的）
网页上所有元素的尺寸一律使用px作为单位
特点：
不管浏览器的尺寸具体是多少，网页矶始终按照最初写代码时的布局来显示，常规的PC的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景
移动端代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 1000px;
background-color: green;
margin: 0 auto;
max-width: 1920px;
}
</style>
</head>
<body>
<div class="container">
我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人
</div>
</body>
</html>效果如下：
