为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。
为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整，但整体布局不变，通常以百分比做为长度单位（通常搭配 min-、max- 属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示），高度大都是用px来固定住。流式布局的代表作栅格系统（网格系统）。
例如设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调
将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
比如像 bootstrap，foundation 这些框架采用的就是栅格系统，只要给页面元素添加其栅格系统指定的类名，就能达到想要的响应式布局效果。
bootstrap 的栅格系统是通过一系列的行和列的组合来创建页面布局，它的栅格系统最大分为12份
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即为不同类别的设备创建不同的静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
在这种布局方式下，当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现滚动条。而且当需求改变时，可能会改动多套代码。
使用自适应布局时，首先在网页代码的头部，加入一样 viewport 标签：
<meta name="viewport" content="width=device-width, initial-scale=1" />
设置网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。然后 CSS 代码不能使用绝对大小，即不能指定像素 px 宽度，而只能使用相对大小 em 或者 %百分比、rem等。
响应式布局的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、ipad等）都能显示出令人满意的效果。通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的展示效果，一般情况下是检测设备屏幕的宽度来实现。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
应用响应式布局，首先要使用视图的 meta 标签来进行重置：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
然后使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。同自适应布局一样，在书写 CSS 样式时，元素宽度不能使用绝对宽度，而要使用相对大小。
Media Queries 是响应式设计的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。但媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。要匹配足够多的屏幕大小，工作量不小，而且页面中会出现隐藏元素的操作，这样代码就比较冗余，加载时间加长，此外设计也需要多个版本。
弹性布局跟流布局很像，网页宽度不固定，使用 em 或 rem 单位进行相对布局，避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。但弹性布局也有局限性，如果不对这种布局设置一个最小宽度，当用户缩小窗口到足够小时会造成布局严重错位。
使用 css3 Flex 系列属性进行相对布局，用来为盒模型提供最大的灵活性。对于富媒体和复杂排版的支持非常大，但是存在兼容性问题。任何一个容器都可以指定为 flex 布局，行内元素也可以使用。
注意：设为 flex 布局后，子元素的 float、clear、vertical-align 属性将失效。
不同点：
相同点：
三种传统PC端⽹⻚布局⽅式：
最常用！
此种布局是⽹⻚的HTML通过DIV标签+CSS样式表代码开发制作的(HTML)⽹⻚的统称。
DIV+CSS布局好处：便于维护，有利的SEO（⾕歌将⽹⻚打开速度作为排名因素及SEO因素），
⽹⻚打开速度还原，符合web标准等。
HTML5 可以让很多更语义化的结构化代码标签代替⼤量⽆意义的 div 标签
对搜索引擎的友好 新的结构标签带来的是⽹⻚布局的改变及提升对搜索引擎的友好。（相比于div标签，HTML5语义化标签提供了更加丰富准确的信息，从而可以帮助搜索引擎更好的搜索页面元素）
HTML5的新标签元素有：
<header> 定义⻚⾯或区段的头部；<footer> 定义⻚⾯或区段的尾部；<nav> 定义⻚⾯或区段的导航区域；<section> ⻚⾯的逻辑区域或内容组合；<article> 定义正⽂或⼀篇完整的内容；<aside> 定义补充或相关内容；
注意：使⽤HTML5 语义化标签的布局模式在IE9以下浏览器不兼容，可使⽤下⾯的代码解决
<!--[if lt IE 9]>
<script src=".js"
type="text/javascript"></script>
<![endif]-->
1）第⼀种：直接在⻚头中使⽤CSS样式修饰。
2）第⼆种：导⼊不同的css样式⽂件
简单划分页面
1)初始代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DIV+CSS传统网页布局</title>
</head>
<body><!-- 网页头部开始 --><div id="header"></div><!-- 网页头部结束 --><!-- 导航开始 --><div id="nav"></div><!-- 导航结束 --><!-- 页面主体开始 --><div id="container"></div><!-- 页面主体结束 --><!-- 页面尾部开始 --><div id="footer"></div><!-- 页面主体结束 -->
</body>
</html>
2）简单样式编写
运行后发现边缘存在空白，这是由于body内部存在内补白
3）通过公共样式消除补白
4）进一步完善头部
5）完善主体body样式
6）完善body内容
7）丰富单个列表的内容
本文发布于:2024-01-29 02:07:30，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170646525511960.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
