关于大屏利用rem自适应

功课传送门:大屏上的全屏页面的自适应适配方案

rem 方案

rem (font size of the root element), 是 css3 的引入的一个大小单位。即相对于根元素的 font-size 值的大小。所谓根元素在网页里一般就是 html. 举例说明：下例中，html 的 font-size 大小是 20px, 那么 1.4rem 和 2.4 rem 就分别代表着 28px 和 48px 了。

假设我们的设计稿其尺寸为 1920 * 1280 px，但屏幕有各式各样的比例与大小，为防止元素布局比例被拉伸扭曲等等，

理想的效果就是让实际画布同比例缩小与放大并且垂直居中，窗口多余空间留白，如下:

由于rem相对html中的font-size，rem又决定了元素的显示的大小，那么关键就在于font-size的设置。

特殊值代入：

**设计稿是这样的一个 1920 * 1080（16：9）的图，实际显示器屏幕是1200*675 （同比例）

若将设计稿宽度10等分（自定义等分，方便计算就行） 并设fontSize=1920px/10 ，则1rem=192px 即：fontSize=1rem=1等分=192ox

倘若该设计稿中有个元素 宽度正好为192px。用rem表示即width:1rem;  元素宽度占设计稿总宽度的比例为1：10 

那么，若想在1200px的屏幕也显示相同比例的该元素，则元素高度应为1200px*（1/10）=120px ；此时 fontSize=1rem=1等分=120px

通过设置fontSize 来改变1rem的值 从而来改变整体画布及其元素大小，fontSize=实际屏幕width/自定义等分数

一、屏幕（窗口）尺寸和设计稿比例一致时，完全占满

二、屏幕（窗口）尺寸比设计图比例瘦时，左右占满（铺满宽度），上下留白，，并上下居中, 显示的比例保持(x:y)

三、屏幕（窗口）尺寸比设计图比例胖时，显示的比例保持(x:y)，此时若将宽度铺满屏幕，则高度会超出屏幕(出现滚动条，出现问题)

问题在于，我们上述fontSize仅将屏幕宽作为基准，以铺满宽度为基础，忽略了高度相对较小的情况

修正：要铺满较小边，以较小边为基准。所以，先计算出按同比例超出的高度=屏幕宽*(设计稿高/设计稿宽)，再按超级高度缩小为实际高度，则宽度跟着缩小，缩小的宽=屏幕宽*（实际高度/超出的高），

化简即：fontSize=屏幕宽*（实际高度/超出的高）/自定义等分数=（屏幕宽/自定义等分数）*(设计稿宽高比/实际屏幕宽高比)

在代码中体现就是：判断实际宽高比与设计稿宽高比，当实际宽高比>设计稿宽高比时，将原有fontSize*(设计稿宽高比/实际屏幕宽高比)