最近做一个项目，web前端是在一个大屏上显示（5x3的组合屏），网页的所有元素字体的布局和尺寸都是按照像素来写死的。在演示阶段才要求在一台电脑上（一个屏幕1920x1080的像素）上演示，由于之前所有的网页元素都是按照像素写死的，而且chrome浏览器最小字体是12px。如果把网页元素的布局和尺寸改成比例，工作量非常大，而且有的字体在chrome浏览器缩小到12px就不能继续缩小了，脑袋都抓爆了，但是经过一番探索和学习，终于解决问题。过程如下所示：
1、最外层元素(id假设为app)设置为上下左右居中，浏览器窗口变化时，最外层元素尺寸跟着窗体一起缩放，且一直居中，
window.onresize=function() {//绑定浏览器窗体onresize事件，当浏览器尺寸变化时，动态改变最外成元素尺寸
var windowHeight=$(window).height();//获取窗体高度
var width=$(window).width();//获取窗体宽度，最外层元素的宽度和浏览器窗体保持一直，
var height=width*(1080*3/1920*5);//根据大屏比列，计算出在一个屏幕当中时最外层元素高度值
var marginTop=0;
if(windowHeight>height){//当元素高度小于浏览器窗体高度时，设置边距来使最外层元素处于上下居中
marginTop=(windowHeight-height)/2;
}
$("#app").css({"width":width,"height":height,"margin-top":marginTop});//设置最外层元素的样式
｝
2、通过使用tranform来实现内层元素的等比列缩放，用法如下所示：
-webkit-transform:scale(0.5,0.4);//分别表示x，y方向的缩放比列，如果只有一个参数，则表示x，y方向都按照同一个比列缩放
-moz-transform:scale(0.5,0.4);
-webkit-transform-origin":"0 0"//表示以哪个点为圆点进行缩放，也可以使用百分数 或者“top” “left” “center”等值
，在onresize的响应方法中添加如下代码：
var scale="scale("+(width/1920*5)+")";//计算缩放比列
$("#app .all").css({"-webkit-transform":scale," -webkit-transform-origin":"0 0","-moz-transform":scale," -moz-transform-origin":"0 0"});//将最外层元素（#app）内部的元素(.all)以最外层元素的左上角为远点进行缩放
3、通过上面两步，页面中的元素可以按照比列进行缩放了，但是字体没有变化，这是因为字体在span元素里面，它的display属性是inline，所以缩放对它没用，解决办法就是把字体所在的span设置为inline-block这样字体就可以一起缩放了。
网友评论