静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

㈠概念

⑴静态布局：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。例如：浏览器窗口是1000px，那么最小的宽度是900px或其他px,只要浏览器缩小过这个最小值就不会自动化的调整。

⑵自适应布局：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术。但是字体不会改变

⑶流式布局：rem布局+viewport;元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。比如，对移动端来说不错；因为流式布局是网站内容一层一层向下加载，例如：新浪微博、今日头条这类网站的页面加载就是流式布局。

⑷响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。

⑸弹性布局：要点在于使用em和rem单位来定义元素宽度，与流式布局有极大的相似性，但也有不同之处，主要区别在于弹性布局的尺寸主要根据字体大小而变化。

 

㈡布局特点

⑴静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

⑵自适应布局：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

⑶流式布局：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

⑷响应式布局：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

 

㈢设计方法

⑴静态布局：①PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
　　               ②移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

⑵自适应布局：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

⑶流式布局：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

⑷响应式布局：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

 

㈣优缺点

⑴静态布局：

①优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。

②缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

 

⑵响应式布局：

①优点：适应pc和移动端，如果足够耐心，效果完美

②缺点：1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。

               2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

 

㈤四种布局方式的小结

⑴响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

⑵流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。

⑶如何实现响应式布局：折腾响应式布局设计，应运而生的web页面响应布局

 

㈥弹性布局（rem/em布局）

1、rem,em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。

 

2、使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为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定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }

 

6、使用rem单位的弹性布局在移动端也很受欢迎。
⑴工具ViewtoREM：PX转换到REM（自动预处理）
⑵rem的定义：font size of the root element，rem是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。
⑶rem与em、px的区别：
①px：像素，比较精确的单位，但不好做响应式布局
②em：以父节点font-size大小为参考点，标准不统一，容易造成混乱
⑷REM支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。

 

7、响应式和弹性布局之间的对比：

⑴响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。

⑵rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

 

㈦结论

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；

2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；

3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

 

参考：https://www.cnblogs.com/yanayana/p/7066948.html

 

https://www.cnblogs.com/shihaiying/p/11637661.html