var ratio = $(window).height() / 1080;
console.log(ratio);
$('body').css({
transform: "scale(" + ratio + ")",
transformOrigin: "left top",
backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
marginLeft: ($(window).width() - $('body').width() * ratio) / 2
});
那么如何做到大屏上內容動態調整適合屏幕展示呢？
響應式媒體查詢、rem,js控制尺寸還是其他方法呢？最開始覺得響應式媒體查詢就可以滿足我的需求，的確是可以精細化控制，可是時間有限，容不得我花費較長時間，而且寫多套尺寸的css 我覺得工作量不少，界面元素一多，要照顧的地方也非常多。js控制也嘗試過，不適合，要resize調整的項目多。總之，糾結了半天。
后來買了一個基礎版的DataV，做了開發，但DataV的可編程型不高，要多花費銀子買企業版！最后問題還是回歸到要H5制作大屏的需求上來。DataV的適屏做的很好，何不借鑒下呢，F12查看源碼，看到了body 的scale css屬性，大概就明白了做法，於是乎開工做。原理就是用一個基礎尺寸比如1920*1080來做開發和布局，最后利用客戶端瀏覽器的尺寸，按一定的計算比例做縮放。
---------------------
作者：大洋彼岸789
來源：CSDN
原文：https://blog.csdn.net/elie_yang/article/details/85160418
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！