学习前端多种布局方式的概念和区别

1、静态布局
静态布局的网页上所有元素尺寸使用px为单位。静态布局是传统的Web设计。
静态布局由于是px为单位，所以PC端的网页都是静态固定（宽高）布局的，也就是设置了min-width如果小于这个宽度就会出现滚动条，大于这个宽度则内容居中外加背景。
方法：
居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，做出横向和竖向的滚动条来查阅被遮掩部分；
优点：这种布局方式简单易懂，没有兼容性问题。
缺点：不能根据用户的屏幕尺寸做出相同的布局表现。

2、自适应布局
（多个静态布局实现自适应）自适应布局：不同的屏幕分辨率定义多个静态布局。一个分辨率范围对应一个静态布局，通过调整分辨率实现变换对应的静态布局。
方法：使用 @media 媒体查询给不同的设备切换不同的样式。
优点：允许网页的宽度自动的调整，网页自动适应不同大小的屏幕。
缺点：每个静态布局中，页面元素不随窗口大小的变化而变化。

3、流式布局
流式布局：使用%百分比定义宽度，高度大都是用px来固定。页面元素的宽度按照屏幕分辨率进行适配调整，整体布局不变。
特点：当屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。会导致文字拉伸。
方法：根据父元素的尺寸使用%百分比调整来适应各种分辨率。
优点：可以用来应对不同尺寸的PC屏幕，目前很常用的布局方式。

缺点：仅宽度使用%百分比来布局，高度使用px来固定，换在很大的屏幕中时，文字是px固定的所以会被拉伸，影响读取效果。

4、弹性布局（rem/em布局）
了解rem和em的区别：em是相对其父元素的字体大小，实际应用有很多问题；而rem是始终相对于html的字体大小，即页面根元素。
特点：文字的各元素的尺寸采用em/rem做单位，页面的主要划分区域的尺寸仍使用百分数或px做单位，仅支持网页内文字尺寸的放大，此时使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。
优点：所有屏幕的高宽比和设计高宽比相同，rem单位的弹性布局在移动端也适用，可以支持浏览器的字体大小调整和缩放等的正常显示。
缺点：rem+js只是宽度自适应，高度做不到自适应。
rem与em、px的区别：
px：像素，比较精确的单位。
em：以父节点（font-size）字体大小为参考点来设定html元素的font-size为某个px值（然后各处（元素尺寸、文字大小）使用rem作为单位，搭配媒体查询或JS，通过屏幕的大小来动态控制html元素的font-size可自动改变所有用rem定义尺寸的元素的大小。

5、响应式布局
响应式布局:结合了流式布局+弹性布局并搭配媒体查询技术使用。
特点：不同尺寸的网页上都有满意的显示效果。含有流式布局的理念（页面元素宽度随着窗口调整而自动适配）。每个屏幕分辨率下面会有一个布局样式，元素位置和大小都会变。
方法：媒体查询+流式布局。使用 @media 媒体查询 和网格系统配合相对布局单位进行布局。
优点：适应pc和移动端，效果完美。
缺点：1.媒体查询是有限的，只能适应主流的宽高。2匹配多个屏幕，工作量大。
响应式布局和弹性布局对比：
响应式布局：改变浏览器宽度，“布局”会随之变化，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，在每一种屏幕下都应该有合理的布局。

rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放。

天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索，已经帮助每一个客户快速开发出属于自己的APP、小程序、网站，是万千企业之选。

标签：天迅达科技 天津APP开发 天津网站建设 网站建设