关于整体缩放布局的一个想法

问题：

比如我的大屏项目是按照1920*1080的比例开发的，这是，如果在其他比例的屏幕上，比如1440*900的比例上显示时，开发的网站会布局就会错乱。如果用传统的scale去自适应，会有黑边的问题，而此方法就是为了解决黑边的问题而生。

解决思路

先把网站放大，然后再缩放回来。
没听懂？直接上案例。

案例

比如，我有一个宽高200像素的屏幕。

而我开发的网站是根据根据宽高600像素的屏幕开发的。里面有一行fontSize为64px的文字。

很显然，这个屏幕已经放不下我的网页了。那我怎么在不花费大量尽力去改已经写好的代码（不改变fontSize）的情况下去自适应这个屏幕呢？我的想法是先把整个网站，也就是body元素大小设置成和设计稿大小的600*600 像素，然后在用scale把他缩放回来。

接下来上代码：

//dom

<div class="div1">

  <div class="div2">全球最牛逼的程序员</div>

</div>
 


//css

<style>

  .div1 {

    width: 200px;

    height: 200px;

    background-color: #bfa;

    margin: 300px auto;

  }

  

  span {

    position: absolute;

    font-size: 24px;

  }

  

  .div2 {

    width: 200px;

    height: 200px;

    font-size: 64px;

    background-color: #ff000050;

  }

</style>

如果把div1看成是整个屏幕，div2看成是我们的网站，因为body元素和屏幕一样大，但是字体没有缩放，所以字体超出了屏幕，那我就把body元素变成和原来一样的600*600像素。然后根据比例，也就是200到600放大了3被，我用scale缩小3倍。直接上代码。
首先把body（div2）放大到600像素

  .div2 {

    width: 600px;

    height: 600px;

    font-size: 64px;

    background-color: #ff000050;

  }

然后缩小3倍

  .div2 {

    width: 600px;

    height: 600px;

    font-size: 64px;

    background-color: #ff000050;

    transform: scale(0.3333333);

    transform-origin: 0 0;

  }

看效果。

好了，这样我们的网站就根据屏幕大小进行了自适应，而且没有因为屏幕太小而出现布局错乱的问题。

这个只是一个我的思路实现的小示例，具体的应用场景还要视情况改变。