html页面怎么适配拼接的大屏,大屏上的全屏页面的自适应适配方案

通常来说PC端的页面并不像移动端页面那样对屏幕大小和分别率有那么强的依赖。一般的页面都是取屏幕中间的一块宽度(1280px), 两边留白, 高度随着内容的长度滚动。这样无论窗口怎么变化，页面都是可用的。比如，我们的这个页面. 然而也有少数的页面，天生就是要在 pc 端全屏显示的，其中最为典型的代表就是全屏的 dashboard 页面。比如：

当然，如果 dashboard 页面是内嵌在一些管理页面里的，通常是允许滚动的。

但是，如果 dashboard 是用于官方宣传，比如在电视机或者广告屏上的展示的时候，通常是不允许滚动条出现的。比如:

这种 dashboard 有个帅气的名字叫数据可视化。

为了实现全屏的这种 dashboard, 通常的做法就是要对宽度和高度都做百分比(网格)来实现了。但是这种方案的缺点在于:实现太麻烦。设计师给的设计稿通常是 px 为单位标注的，我们需要仔细的计算宽度和高度的比例，然后小心处理页面的布局。

难以处理屏幕宽高比与设计图不符时，带来的元素变形。所以最后展示的屏幕不能和设计稿的屏幕的宽高比差距太大。

比如，下面这个简单的页面就是用百分比方案来做的。设计师给的图的比例为 16: 9。

当窗口比例是 16 : 9 的时候黄色的长方形显示符合设计，当窗口变成正方形的时候，黄色部分也跟着变方了，这必然会影响显示效果。可以在浏览器中打开，改变窗口大小页面来体验这个百分比方案。

理想的效果

我心目中的理想效果可能是像下面这个页面一样，无论窗口怎么变，我们的内容都保持原来的比例，并尽量占满窗口(类似 background contain 的效果)。屏幕尺寸和设计稿比例(16:9)一致时，占满屏幕

屏幕尺寸比设计图比例瘦时，上下留白，左右占满，并上下居中, 显示的比例保持16：9

屏幕尺寸比设计图比例胖时，左右留白，上下占满，并左右居中, 显示的比例保持16：9

可以在浏览器中打开，改变窗口大小页面来体验这个flexible方案

rem 方案

熟悉移动端的自适应方案的朋友对 rem 适应方案，肯定不陌生，最出名的就是阿里的 lib-flexible 方案。可能你已经猜到，本文的这个方案肯定也是基于 rem 的.

rem (font size of the root element), 是 css3 的引入的一个大小单位。即相对于根元素的 font-size 值的大小。所谓根元素在网页里一般就是 html.