流式布局、响应式布局、弹性布局等概念和区别
静态布局（Static Layout）
即传统Web设计，⽹页上的所有元素的尺⼨⼀律使⽤px作为单位。
1、布局特点：不管浏览器尺⼨具体是多少，⽹页布局始终按照最初写代码时的布局来显⽰。常规的pc的⽹站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则内容居中外加背景，这种设计常见于pc端。
2、设计⽅法：
  PC：居中布局，所有样式使⽤绝对宽度/⾼度(px)，设计⼀个Layout，在屏幕宽⾼有调整时，使⽤横向和竖向的滚动条来查阅被遮掩部分；
  移动设备：另外建⽴移动⽹站，单独设计⼀个布局，使⽤不同的域名如wap.或m.。
  在移动端开发中采⽤静态布局的两种⽅式：(来⾃：流布局与响应式⽹页设计有什么区别？)
　（1）在viewport meta标签上设置width=320，页⾯的各个元素也采⽤px作为单位。通过⽤JS动态修改标签的initial-scale使得页⾯等⽐缩放，从⽽刚好占满整个屏幕。（见前端开发-web app 变⾰之rem）
　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页⾯的各个元素也采⽤px作为单位。由于640px超出了⼿机宽度，浏览器会⾃动缩⼩页⾯⾄刚好全屏。（具体见content"width=640,user-scalable=no" 然后再进⾏固定尺⼨的px设计？ - 前端开发）
优点：这种布局⽅式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显⽽易见，即不能根据⽤户的屏幕尺⼨做出不同的表现。
当前，⼤部分门户⽹站、⼤部分企业的PC宣传站点都采⽤了这种布局⽅式。固定像素尺⼨的⽹页是匹配固定像素尺⼨显⽰器的最简单办法。但这种⽅法不是⼀种完全兼容未来⽹页的制作⽅法，我们需要⼀些适应未知设备的⽅法。
⾃适应布局（Adaptive Layout）
⾃适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应⼀个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页⾯元素位置发⽣改变），但在每个静态布局中，页⾯元素不随窗⼝⼤⼩的调整发⽣变化。可以把⾃适应布局看作是静态布局的⼀个系列。
1、布局特点：屏幕分辨率变化时，页⾯⾥⾯元素的位置会变化⽽⼤⼩不会变化。
2、设计⽅法：使⽤ @media 媒体查询给不同尺⼨和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同⼀个设备下实际还是固定的布局。
流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid") 是页⾯元素的宽度按照屏幕分辨率进⾏适配调整，但整体布局不变。代表作栅栏系统（⽹格系统）。
⽹页中主要的划分区域的尺⼨使⽤百分数（搭配min-*、max-*属性使⽤），例如，设置⽹页主体的宽度为80%，min-width为960px。图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。
1、布局特点：屏幕分辨率变化时，页⾯⾥元素的⼤⼩会变化⽽但布局不变。【这就导致如果屏幕太⼤或者太⼩都会导致元素⽆法正常显⽰】
2、设计⽅法：使⽤%百分⽐定义宽度，⾼度⼤都是⽤px来固定住，可以根据可视区域 (viewport) 和⽗元素的实时尺⼨进⾏调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺⼨流动范围以免过⼤或者过⼩影响阅读。
这种布局⽅式在Web前端开发的早期历史上，⽤来应对不同尺⼨的PC屏幕（那时屏幕尺⼨的差异不会
太⼤），在当今的移动端开发也是常⽤布局⽅式，但缺点明显：主要的问题是如果屏幕尺度跨度太⼤，那么在相对其原始设计⽽⾔过⼩或过⼤的屏幕上不能正常显⽰。因为宽度使⽤%百分⽐定义，但是⾼度和⽂字⼤⼩等⼤都是⽤px来固定，所以在⼤屏幕的⼿机下显⽰效果会变成有些页⾯元素宽度被拉的很长，但是⾼度、⽂字⼤⼩还是和原来⼀样（即，这些东西⽆法变得“流式”），显⽰⾮常不协调。
响应式布局（Responsive Layout）
随着CSS3出现了媒体查询技术，⼜出现了响应式设计的概念。响应式设计的⽬标是确保⼀个页⾯在所有终端上（各种尺⼨的PC、⼿机、⼿表、冰箱的Web浏览器等等）都能显⽰出令⼈满意的效果，对CSS编写者⽽⾔，在实现上不拘泥于具体⼿法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使⽤。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应⽤流式布局的理念，即页⾯元素宽度随着窗⼝调整⽽⾃动适配。即：创建多个流体式布局，分别对应⼀个屏幕分辨率范围。可以把响应式布局看作是流式布局和⾃适应布局设计理念的融合。
响应式⼏乎已经成为优秀页⾯布局的标准。
*原理:*通过媒体查询来定制某个宽度区间的⽹页布局
2、设计⽅法：媒体查询+流式布局。通常使⽤ @media 媒体查询 和⽹格系统 (Grid System) 配合相对
布局单位进⾏布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单⼀⽹页不同设备返回不同样式的技术统称。
*优点:*1.⾯对不同的分辨率设备灵活性强
2.能够快速的解决多设备显⽰的适应问题
3.适合中⼩型⽹站
*缺点:*1.兼容于各种设备⼯作量⼤，效率降低
2. 代码累赘，以及加载事件过长
响应式布局的使⽤
语法: @media媒体类型关键字 媒体特性(即媒体条件) {样式代码}
@media screen and (max-width:1200px){
.c-nav ul li{
margin-left: 20px;
}
}
@media screen and (max-width:992px){
.c-nav ul li{
margin-left: 10px;
}
}
@media screen and (max-width:768px){
.c-nav ul li:nth-child(4),.c-nav ul li:nth-child(5){
display: none;
}
}
@media screen and (max-width:576px){
.c-nav{
background-color:rgba(176,204,243,0.8);
padding: 10px 0px 10px 0px;
opacity: 0.9;
}
.c-nav .navFlex{
flex-wrap:wrap;
font-size: 20px;
justify-content: space-between;
}
.c-nav .logo{
height: 30px;
}
.c-nav ul li{
padding-top: 10px;
margin-left: 0px;
display: block;
}
.c-nav ul li a{
border-bottom: 3px solid transparent;
}
.c-nav ul a:hover{
border-bottom: 3px solid #e4c17e;
}
.c-nav ul li:nth-child(4),.c-nav ul li:nth-child(5){
display: block;
}
.c-nav .hiden{
display: block;
}
.c-nav .show{
width: 100%;
font-size: 14px;
text-align: center;
display: none;
}
}
弹性布局（flexible layout）
弹性布局，⼜称“Flex布局”，是由W3C于2009年推出的⼀种布局⽅式。可以简便、完整、响应式地实现各种页⾯布局。⽽且已经得到所有主流浏览器的⽀持。
>>> 了解两个基本概念，接下来会频繁提到：
容器： 需要添加弹性布局的⽗元素；
项⽬： 弹性布局容器中的每⼀个⼦元素，称为项⽬；
>>> 了解两个基本⽅向，这个牵扯到弹性布局的使⽤：
主轴： 在弹性布局中，我们会通过属性规定⽔平/垂直⽅向为主轴；
交叉轴： 与主轴垂直的另⼀⽅向，称为交叉轴。
弹性布局的使⽤
给⽗容器添加display: flex/inline-flex；属性，即可使容器内容采⽤弹性布局显⽰，⽽不遵循常规⽂档流的显⽰⽅式；
容器添加弹性布局后，仅仅是容器内容采⽤弹性布局，⽽容器⾃⾝在⽂档流中的定位⽅式依然遵循常规⽂档流；
display:flex; 容器添加弹性布局后，显⽰为块级元素；
display:inline-flex; 容器添加弹性布局后，显⽰为⾏级元素；
设为 Flex布局后，⼦元素的float、clear和vertical-align属性将失效。但是position属性，依然⽣效
.box {
html的flex布局display: flex;
justify-content: space-between;
}
rem布局
** em、rem、meta标签的基本概念**
em 是⼀个布局的长度单位，当前对象内⽂本的字体⼤⼩的相对单位，也就是说相对于当前元素的font-size。
rem 是（根）字体⼤⼩相对单位，也就是说跟当前元素的font-size没有关系，⽽是跟整个body的font-size有关系。meta标签，我们可以指定浏览器的适⼝，适⼝就是可以看见的区域

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。