Web前端开发⼯程师必会的⽹页布局⽅法
1.静态布局（static）
1.1布局特点
不管浏览器尺⼨具体是多少，⽹页布局始终按照最初写代码时的布局来显⽰。常规的pc的⽹站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则内容居中外加背景，这种设计常见于pc端。
1.2.设计⽅法
PC设备：设计⼀个居中布局，⼀般具有固定的宽度，当浏览器窗⼝缩⼩时，页⾯内容会被遮挡，呈现横竖向滚动条。
移动设备：另外建⽴移动⽹站，单独设计⼀个布局，使⽤不同的域名如wap.或m.
1.3 在移动端开发中采⽤静态布局的两种⽅式
（1）在viewport meta标签上设置width=320，页⾯的各个元素也采⽤px作为单位。通过⽤JS动态修改标签的initial-scale使得页⾯等⽐缩放，从⽽刚好占满整个屏幕。
（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页⾯的各个元素也采⽤px作为单位。由于640px超出了⼿机宽度，浏览器会⾃动缩⼩页⾯⾄刚好全屏。
1.4 优缺点
优点：这种布局⽅式对设计师和前端来说都是最简单的，不⽤去考虑兼容性等问题。设计和开发成本低，后期维护成本低
缺点：在⼩屏上有可能出现横向滚动条，在⼤屏上会出现⼤量的空⽩，不能根据⽤户的屏幕尺⼨做出不同的表现，⽤户体验⽐较差。
1.5 总结
⽬前，⼤部分门户⽹站、⼤部分企业的PC宣传站点都采⽤了这种布局⽅式。固定像素尺⼨的⽹页是匹配固定像素尺⼨显⽰器的最简单办法。但这种⽅法不是⼀种完全兼容未来⽹页的制作⽅法，我们需要⼀些适应未知设备的⽅法。
2.流式布局
2.1 布局特点
css始终显示滚动条
页⾯元素的宽度按照屏幕分辨率进⾏适配调整，页⾯⾥元素的⼤⼩会变化⽽但布局不变。⽹页中主要的划分区域的尺⼨使⽤百分数（搭配min-*、max-*属性使⽤），例如，设置⽹页主体的宽度为80%，min-width为960px。图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。
流式布局（Liquid）的特点（也叫"Fluid") 是代表作栅栏系统（⽹格系统）。
2.2 设计⽅法
使⽤%百分⽐定义宽度，⾼度⼤都是⽤px来固定住，可以根据可视区域 (viewport) 和⽗元素的实时尺⼨进⾏调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺⼨流动范围以免过⼤或者过⼩影响阅读。
2.3 优缺点：
优点：在不同分辨率屏幕上能够很好的展⽰页⾯元素，如果设计得当，流动布局能避免在⼩屏幕上出现⽔平滚动条，对于差别不是很⼤的屏幕分辨率⼗分友好。
缺点：如果屏幕太⼤或者太⼩都会导致元素⽆法正常显⽰。因为宽度使⽤%百分⽐定义，但是⾼度和⽂字⼤⼩等⼤都是⽤px来固定，所以在⼤屏幕的⼿机下显⽰效果会变成有些页⾯元素宽度被拉的很长，但
是⾼度、⽂字⼤⼩还是和原来⼀样（即，这些东西⽆法变得“流式”），显⽰⾮常不协调。
2.4 总结
流式布局是⽤于解决类似的设备不同分辨率之间的兼容(⼀般分辨率差异较少)，典型的代表是栅格系统，⼀般页⾯中采⽤百分⽐定宽的部分都可以看做是流动布局的属性。⽬前⼤部分⽹页为了实现更好的视觉效果都会全局或局部使⽤流式布局。流式布局，如果宽度太⼩，放不下两个元素，后⾯的元素会⾃动滚动到前⾯元素的下⽅，不会在⽔平⽅向overflow（溢出），避免了⽔平滚动条的出现。
3.⾃适应布局
为不同的屏幕分辨率定义的布局创建多个静态布局，每个静态布局对应⼀个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页⾯元素位置发⽣改变），但在每个静态布局中，页⾯元素不随窗⼝⼤⼩的调整发⽣变化。可以把⾃适应布局看作是静态布局的⼀个系列。
3.1 布局特点
屏幕分辨率变化时，页⾯⾥⾯元素的位置会变化⽽⼤⼩不会变化。
3.2 设计⽅法
使⽤ @media 媒体查询给不同尺⼨和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同⼀个设备下实际还是固定的布局。
⼀列布局（静态布局）：⼀列⾃适应居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>⼀列布局：⼀列⾃适应居中</title>
<style>
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
.container {
width:600px;
height:100%;
margin:0 auto;
background:gray;
border:1px red solid;
}
</style>
</head>
<body>
<div class="container"> 页⾯</div>
</body>
</html>
两列布局：⼀列固定宽+⼀列⾃适应
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局：⼀列固定宽，⼀列⾃适应</title>
<style>
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
aside, .main {
height:100%;
border:1px red solid;
}
aside {
background:#0FF;
float:left;
width:200px;
}
.main {
margin-left:210px;
background:#CC3;
}
</style>
</head>
<body>
<aside>边栏导航</aside>
<div class="main">主体box</div>
</body>
</html>
三列布局：中间列⾃适应宽+左右列固定宽(⼀般使⽤圣杯布局和双飞翼布局)
三列⼀般分别是⼦列、主列和附加列，其中⼦列⼀般是居左的导航，且宽度固定；主列是居中的主要内容，宽度⾃适应；附加列⼀般是⼴告等额外信息，居右且宽度固定。
圣杯布局:
<div class="container">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
.container {
padding-left: 210px;
padding-right: 190px;
}
.main {
float: left;
width: 100%;
height: 300px;
}
.sub {
position: relative;
left: -210px;
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
}
.extra {
position: relative;
right: -190px;
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
}
双飞翼布局:
<div class="main-wrapper">
<div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
.main-wrapper {
float: left;
width: 100%;
}
.main {
height: 300px;
margin-left: 210px;
margin-right: 190px;
margin: 0px; padding: 0px; border: 0px; color: rgb(0, 117, 59);">rgba(255, 0, 0, .5);
}
.sub {
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
margin: 0px; padding: 0px; border: 0px; color: rgb(0, 117, 59);">rgba(0, 255, 0, .5);
}
.extra {
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
margin: 0px; padding: 0px; border: 0px; color: rgb(0, 117, 59);">rgba(0, 0, 255, .5);
}
两种布局⽅式都是把主列放在⽂档流最前⾯，使主列优先加载。相同之处，都是让三列浮动，然后通过负外边距形成三列布局。不同之处在于如何处理中间主列的位置：圣杯布局是利⽤⽗容器的左、右内边距定位；双飞翼布局是把主列嵌套在div后利⽤主列的左、右外边距定位。
4.响应式布局
针对越来越多的移动端设备，⼀个web设计能够兼容多个终端。通过CSS3中的Media Query（媒介查询），采⽤栅格化⽅式，分别为不同的屏幕分辨率定义布局。可以把响应式布局看作是流式布局和⾃适应布局设计理念的融合。
4.1 布局特点
每个屏幕分辨率下⾯会有⼀个布局样式，即元素位置和⼤⼩都会变。
4.2 设计⽅法
媒体查询+流式布局。通常使⽤ @media 媒体查询和⽹格系统 (Grid System) 配合相对布局单位进⾏布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单⼀⽹页不同设备返回不同样式的技术统称。
4.3 优缺点
优点：适应pc和移动端，如果⾜够耐⼼，效果完美
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽⾼。（2）要匹配⾜够多的屏幕⼤⼩，⼯作量不⼩，设计也需要多个版本。
4.4 总结
响应式是⽤于解决不⽤设备之间不⽤分辨率之间的兼容问题(⼀般是指PC，平板，⼿机等设备之间较⼤的分辨率差异)。响应式与⾃适应的原理是相似的，都是检测设备，根据不同的设备采⽤不同的css，⽽且css都是采⽤的百分⽐的，⽽不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不⼀样的，会随着设备的改变⽽改变展⽰样式，⽽⾃适应不会，所有的设备看起来都是⼀套的模板，不过是长度或者图⽚变⼩了，不会根据设备采⽤不同的展⽰样式，流式就是采⽤了⼀些设置，当宽度⼤于多少
时怎么展⽰，⼩于多少时怎么展⽰，⽽且展⽰的⽅式向⽔流⼀样，⼀部分⼀部分的加载，静态的就是采⽤固定宽度的了。
5.弹性布局（rem/em布局）
响应式布局中的⼀种，为了实现响应式布局，CSS3提供的⼀种最新布局模式。提供更加⾼效的⽅式来对布局容器的⼦元素进⾏排列、对齐和分配空⽩空间。其实rem布局的本质是等⽐缩放，⼀般是基于宽度。
5.1 布局特点
弹性布局采⽤的单位是em或者rem，为了直观，所以直接采⽤了单位缩写去区分。em和rem是⼀个相对长度单位，页⾯内各元素的尺⼨采⽤em/rem做单位，em是相对其⽗元素⼤⼩，rem是始终相对于html⼤⼩，即页⾯根元素。
5.2 设计⽅法
⾸先，设置rem单位所代表的尺⼨⼤⼩和屏幕宽度成正⽐，有3中⽅案，先不必纠结其中的数值：
（1）媒体查询, 设定每种屏幕对应的font-size
@media screen and (min-width:240px) {
html, body, button, input, select, textarea {
font-size:9px;
}
}
@media screen and (min-width:320px) {
html, body, button, input, select, textarea {
font-size:12px;
}
}
// 红⽶Note2
@media screen and (min-width:360px) {
html, body, button, input, select, textarea {
font-size:13.5px;
}
}
@media screen and (min-width:375px) {
html, body, button, input, select, textarea {
font-size:14.0625px;
}
}
（2）js设置html的font-size⼤⼩
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';
（3）使⽤vw设置，vw也是⼀个相对单位，100vw等于屏幕宽度
html{
font-size: 10vw;
}
这3种⽅式，都可以设置html的font-size和屏幕宽度成正⽐。这3种的单位是css尺⼨,⽆论第⼀种⽅法的min-width还是第⼆种document.documentElement.clientWidth都是相对于设备的css尺⼨⽽⾔。第⼀种，需要设置需要每种屏幕都设置对应的font-size，这些font-size都是根据⽐例算出来的，⽐较繁琐，⽽且还有可能漏掉某些屏幕尺⼨，不推荐。第⼆种⽤js设置，⽐较⽅便，现在⼤部分⽹站采⽤这种⽅式。第三种通过css的vw来设置，也很⽅便，⽽且不⽤写css，但是兼容性还不是特别好。综合推荐使⽤第⼆种。
5.3 优缺点
优点：理想状态是所有屏幕的⾼宽⽐和最初的设计⾼宽⽐⼀样，或者相差不多，完美适应。
缺点：这种rem+js只不过是宽度⾃适应，⾼度没有做到⾃适应，⼀些对⾼度，或者元素间距要求⽐较⾼的设计，则这种布局没有太⼤的意义。如果只是宽度⾃适应，更推荐响应式设计。
5.4 总结
使⽤rem布局，实质都是通过动态改写html的font-size基准值，来实现不同设备下的良好统⼀适配；
容器元素的字体⼤⼩都不使⽤rem，需要额外的media查询；⼤部分情况下都可以⽤rem布局这个⽅法，只有底部的导航不⽤rem，⽽是⽤的flex布局。因为导航点击最多，所以给它⼀个固定的⼤⼩（其实就是⾼度固定，宽度⾃适应的⽅案），底部导航和顶部搜索框⽤的⾼固定，宽度⾃适应的⽅案，其余的部分基本都是随着浏览器宽度变化在等⽐例缩放.
6.flex 布局
Flex 布局的主要思想是使⽗容器能够调节⼦元素的宽度/⾼度（和排列顺序），从⽽能够最好地填充可⽤空间（主要是为了适应所有类型的显⽰设备和屏幕尺⼨）。flex布容器能够放⼤⼦元素使之尽可能填充可⽤空间，也可以收缩⼦元素使之不溢出。flexbox布局与⽅向⽆关，不同于常规布局。
6.1 布局特点
采⽤ Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有⼦元素⾃动成为容器成员，称为 Flex 项⽬（flex item），简称"项⽬"。
6.2 容器的属性
6.3 项⽬的属性
6.4 总结
Flexbox布局最适合应⽤程序的组件和⼩规模布局，⽽ Gird 布局则适⽤于较⼤规模的布局。
设为Flex布局以后，⼦元素的float、clear和vertical-align属性将失效。

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