作为前端开发工程师，布局的方法有很多，针对不同的情况给出不同的解决方案，但是很多初学者并不知道这些情况。那么今天就来说说前端开发工程师必须知道的五种布局方法吧！1.静态布局是传统的网页设计。网页上所有元素的尺寸都是px。 1.布局功能无论浏览器大小如何，网页的布局总是根据最初编写代码时的布局显示。 常规PC的网站都是静态布局(宽度固定)，也就是设置了min-width。在这种情况下，如果小于此宽度，将出现滚动条，如果大于此宽度，内容将居中并带有背景。这种设计在PC端很常见。 2.设计方法PC:居中布局，所有样式使用绝对宽度/高度(px)，设计一个布局，在调整屏幕宽度和高度时，使用水平和垂直滚动条查看隐藏部分；移动设施:另设一个移动网站，单独设计一个版面，使用wap等不同的域名。或者m。 优点:这种布局对于设计师和CSS编写者来说是最简单的，不存在兼容性问题。 缺点:显然不能根据客户的屏幕大小进行不同的体现。 目前大部分企业的大部分门户网站和PC宣传网站都采用了这种布局。 具有固定像素大小的网页是匹配具有固定像素大小的显示器的最简单方法。 然而，这种方法并不完全兼容未来的网页制作方法，我们需要一些方法来适应未知的设施。 2.液体布局(Liquid Layout)液体布局(也叫“流体”)的特点是根据屏幕分辨率调整页面元素的宽度，但整体布局不变。 代表性围栏系统(网格系统) 例如，网页中主要划分区域的大小百分比(与min-*和max-*属性一起使用)，将网页主体的宽度设置为80%，将最小宽度设置为960像素。 对于图片也做了类似的解决方案(宽度:100%，max-width一般设置为图片本身的大小，防止因拉伸而失真)。 1.布局功能当屏幕分辨率改变时，页面中元素的大小会改变，但布局不会改变。 【这就导致了屏幕太大或者太小都无法正常显示元素。 2.设计方法使用% percentage定义宽度，高度多由px固定，可根据可视区(viewport)和父元素的实时大小进行调整，尽可能适应各种分辨率。 通常用max-width/min-width等属性控制大小流范围，以免过大或过小影响读取。 在Web前台开发的早期历史中，这种布局是用来处理不同尺寸的PC屏幕的(当时屏幕尺寸的差别不会太大)，也是当今手机开发中常见的布局，但它有明显的缺点:主要问题是如果屏幕尺寸跨度过大，就无法在比其原始设计过小或过大的屏幕上正常显示。 因为宽度是用% percentage定义的，但是高度和文字大小大多是用px固定的，所以在大屏手机下的显示效果会变成一些页面元素的宽度被拉伸的很长，但是高度和文字大小还是和以前一样(就是这些东西不能变成“流”)，显示很不协调。第三，适应性布局。自适应布局的特点是为不同的屏幕分辨率定义布局，即创建多个静态布局。 改变屏幕分辨率可以切换不同的静态部分(页面元素的位置发生变化)，但在每个静态布局中，页面元素并不随着窗口大小的调整而变化。 自适应布局可以被视为一系列静态布局。 1.布局功能当屏幕分辨率改变时，页面中元素的位置会改变，但大小不会改变。 2.设计方法使用@media media query为不同大小和媒体的设施切换不同的风格。 在优秀响应范围的设计下，可以给适应范围内的设施最好的体验，实际布局还是固定在同一个设施下。 四。响应式布局随着CSS3中媒体查询技术的出现，响应式设计的概念再次出现。 响应式设计的目标是确保一个页面能够在所有终端(各种尺寸的PC、手机、手表、冰箱的网页浏览器等)上显示令人满意的结果。).对于CSS编写者来说，实现并不局限于特定的技术，而通常是将流式布局与灵活布局相结合，再配合媒体查询技术使用。 ——分别为不同的屏幕分辨率定义布局，同时在每个布局中，应用流式布局的概念，即页面元素的宽度随着窗口调整自动适应。 也就是说，创建了多个流体布局，它们分别对应于屏幕分辨率范围。 响应式布局可视为流式布局和自适应布局设计概念的集成。 响应性几乎成了优秀页面布局的标准。 1.布局特征每个屏幕分辨率下都会有一个布局样式，即元素的位置和大小会发生变化。 2.设计方法:媒体查询+流媒体布局 通常使用@media媒体查询和网格系统进行相对布局单元的布局。其实就是综合响应、流量等上述技术的总称，通过CSS对单个网页的不同设施返回不同的风格。 优点:适用于pc和手机，如果足够耐心，效果会很完美。 缺点:(1)媒体查询有限，即可以枚举，只能适应主流的宽度和高度。 (2)要匹配足够多的屏幕尺寸，工作量不小，设计也需要多个版本。 响应页面将在开头添加以下代码: 2.使用em或rem单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器字体大小调整和缩放的正常显示。因为em是相对亲本元素，所以没有普及。 【中文网站制作网页时，习惯上使用CSS强制字体大小，以保证大家看到一致的效果。包括网易、搜狐在内的大部分网站都使用绝对单位px(像素)。 但如果考虑网站的可用性，字体大小应该是可变的，少数视力不好的人需要放大字体才能看清页面内容。 但是，占据大部分浏览器市场的IE无法调整以px为单位的字体大小。 国外的人非常重视网站的可用性，相当多的国外网站已经用em作为字体单位。 3.这种布局的特点是，被换行文本的每个元素的大小以em/rem度量，而页面的主要划分区域的大小仍然以百分比或px度量(与“流式布局”或“静态/固定布局”相同)。 早期的浏览器不支持整个页面的缩放，只支持网页中文本大小的放大。在这种情况下， 使用em/rem作为单位，您可以使环绕文本的元素随着文本的缩放而缩放。 4.浏览器默认字体高度一般是16px，也就是1em:16px，但是1:16的比例不方便计算。为了让单位em/rem更直观，CSS编写者往往会将页面和节点字体设置为62.5%。比如选择rem控制字体时，需要先设置根节点html的字体大小。因为浏览器默认字体大小是16px*62.5%=10px， 这样1rem就是10px，方便计算。 5.用em/rem定义大小的另一个优点是，它更适合在字体单位填充或边距//浏览器中缩进/设置字体大小(因为em/rem相对于字体大小同步变化) 示例:p { text-indent:2em；} 6.使用rem单元的灵活布局在手机上也很受欢迎。 7.其实在手机上用所谓的灵活布局还是比较勉强的。 说到底，手机柔性布局受欢迎的原因是，在调整页面各元素的大小和文字大小时(根据屏幕大小)，rem单元比较好用。 事实上，使用vw、vh等后起之秀的公司就可以实现完美的流式布局(无论是高度还是文字大小都可以变成“流式”)，灵活布局已经没有必要了。 在职开发，如果你也想学习前端开发的技术，可以加入我的前端学习交流裙:851 231 348或者关注我的微信微信官方账号:【前端留学生】一套自己根据多年开发经验录制的web前端强化讲座视频和学习方法，以及少量前端学习手册、前端面试问题、前端开发工具、PDF文档、书籍和教程，免费参考。 需要的话可以自己下载。 1.如果只使用pc端，那么静态布局(固定宽度)是最佳选择；2.如果用手机，对高度和元素间距的设计要求不高，那么灵活布局(rem+js)是最好的选择，一个css+一个js调整字体大小；3.如果pc和移动兼容，要求很高，那么响应式布局还是最好的选择，前提是根据高度和宽度不同设计不同，根据媒体查询响应式布局也不同。