电脑是一个大屏，现在大部分电脑的分辨率都是 1920 x 1080了，也就是1080P，代表高清。那在pc的设计阶段，一般的ui都是按照这个 1080P来设计的，那前端基本上也是在 1920 x 1080的电脑上来开发的，所以当只使用静态布局的时候，是完全没问题的。
至于屏幕大小（尺寸）和分辨率的区别，其实涉及到像素点知识，我也不太懂哈，一般都是说“尺寸”。比如我的电脑分辨率是 2560 x 1600，而在代码中输出屏幕尺寸是1440px，而给元素设置width:720px;，刚好是屏幕的一半。
现在就说说几种常见的布局：
1. 静态布局
就是传统的布局方式，所有的元素都是用 px 为单位进行设定的。
-
布局特点
不论屏幕的大小，始终是按照设计稿来设计的，在和设计稿尺寸一样的电脑上看，是没问题的，但在小屏幕上看，则页面是超出了屏幕，出现滚动条。 -
优点：
对开发来说是最简单的方式，也不存在兼容性问题。 -
缺点：
不能对不同的屏幕做出不同的表现。
2.流式布局
当屏幕分辨率大小发生变化的时候，页面的元素大小会变化，但布局不会，原来多少行就多少行。
-
布局特点
主要是使用%来定义宽度的，高度还是使用px。可以根据可视区和父元素的实际尺寸来调整，某些元素往往是搭配min-width和max-width来控制伸缩范围的。 -
优点
这种方式更适用于屏幕尺寸差异没那么大的情况。 -
缺点
如果屏幕尺寸跨度很大，由于宽是%定义，而高是固定的，则会出现元素被拉得很长的情况，非常不协调。
3.自适应布局
就是为不同屏幕来定义不同的布局，就是创建多个静态布局，每个静态布局对应一个屏幕分辨率的范围。当屏幕分辨率变化时，就切换到对应的静态布局。
-
布局特点
属于静态布局的一个系列吧，毕竟宽高都是使用px。当屏幕发生变化时，因为是使用不同的样式表，所以元素的位置和大小都有可能变化，取决于当前样式表的设置。常使用媒体查询来实现。 -
优点
每个范围的屏幕分辨率都对应一个样式布局，能很好地展示前端的页面布局，能给用户提供更好的体验。 -
缺点
每个范围的分辨率都有一个样式布局，工作量大且繁重，较为消耗精力，当项目不是很轻松的时候，不建议使用。
4.弹性布局
弹性布局的核心是单位。通常是 rem和em，rem始终相对于html大小的，而em是相对于父元素大小的。
-
布局特点
使用em和rem布局，相对于%更加灵活。一般，包裹文字的各个元素的尺寸使用rem/em做单位，而页面的划分（模块）仍然使用 流失布局或静态布局。浏览器默认字体是16px，这比例相对难以计算，所以一般将根节点字体设为62.5%。
html{
font-size: 62.5%;
}
div{
width: 20rem; //200px
height: 20rem;
}
-
优点
理想状态下是所有屏幕的宽高比和最初的设计稿宽高比一样，或者差不多，完美适应。 -
缺点
当项目中途需要实现时，需要改动很多的单位，非常麻烦，只能使用第三方库处理，而且有的第三方库不能处理内联样式的单位。第三方库会把单位都变为rem，导致缩小屏幕时，原来的页面跑到浏览器的头部。
5.响应式布局
这个可以说是一个最常说的布局了。其目标就是确保一个页面在所有的终端（各个尺寸的pc，包括办公室的大屏、手机、平板等）都能显示出令人满意的效果。这个效果就不仅仅是ui最初的那个设计搞了，举个例子，在大屏上和在1080P的电脑上的布局一样，只是在大屏上被放大了。在pc上原来是5列，到mac上变为4列了。在手机上，列数少了，某个图标，某个表格的样式和位置都变了。
-
布局特点
这种布局较为繁琐，有多种方法去实现，但通常都是结合了流式布局 + 弹性布局，在结合媒体查询来使用的。为不同范围的分辨率定义不同的布局（媒体查询），在每个布局中调整元素的尺寸位置（流式布局、弹性布局）。会在html头部添加这段代码。
<meta name="applicable-device" content="pc,mobile"/>
<meta http-equiv="Cache-Control" content="no-transform"/>
-
优点
对pc和移动端有着非常好的适应，只要有足够的时间和精力，就能做出完美的页面。
-
缺点
需要制作多种样式布局，每个页面的元素位置大小也需要调整，工作量大，任务重。
