? ? ? ?最近做一個(gè)項(xiàng)目，web前端是在一個(gè)大屏上顯示（5x3的組合屏），網(wǎng)頁的所有元素字體的布局和尺寸都是按照像素來寫死的。在演示階段才要求在一臺(tái)電腦上（一個(gè)屏幕1920x1080的像素）上演示，由于之前所有的網(wǎng)頁元素都是按照像素寫死的，而且chrome瀏覽器最小字體是12px。如果把網(wǎng)頁元素的布局和尺寸改成比例，工作量非常大，而且有的字體在chrome瀏覽器縮小到12px就不能繼續(xù)縮小了，腦袋都抓爆了，但是經(jīng)過一番探索和學(xué)習(xí)，終于解決問題。過程如下所示：

? ? ? 1、最外層元素(id假設(shè)為app)設(shè)置為上下左右居中，瀏覽器窗口變化時(shí)，最外層元素尺寸跟著窗體一起縮放，且一直居中，

window.onresize=function() {//綁定瀏覽器窗體onresize事件，當(dāng)瀏覽器尺寸變化時(shí)，動(dòng)態(tài)改變最外成元素尺寸

var windowHeight=$(window).height();//獲取窗體高度

var width=$(window).width();//獲取窗體寬度，最外層元素的寬度和瀏覽器窗體保持一直，

var height=width*(1080*3/1920*5);//根據(jù)大屏比列，計(jì)算出在一個(gè)屏幕當(dāng)中時(shí)最外層元素高度值

var marginTop=0;

if(windowHeight>height){//當(dāng)元素高度小于瀏覽器窗體高度時(shí)，設(shè)置邊距來使最外層元素處于上下居中

marginTop=(windowHeight-height)/2;

}

$("#app").css({"width":width,"height":height,"margin-top":marginTop});//設(shè)置最外層元素的樣式

｝

? ?2、通過使用tranform來實(shí)現(xiàn)內(nèi)層元素的等比列縮放，用法如下所示：

? ? ? -webkit-transform:scale(0.5,0.4);//分別表示x，y方向的縮放比列，如果只有一個(gè)參數(shù)，則表示x，y方向都按照同一個(gè)比列縮放

? ? ? ?-moz-transform:scale(0.5,0.4);

? ? ? ?-webkit-transform-origin":"0 0"http://表示以哪個(gè)點(diǎn)為圓點(diǎn)進(jìn)行縮放，也可以使用百分?jǐn)?shù) 或者“top” “l(fā)eft” “center”等值

，在onresize的響應(yīng)方法中添加如下代碼：

var scale="scale("+(width/1920*5)+")";//計(jì)算縮放比列

$("#app .all").css({"-webkit-transform":scale," -webkit-transform-origin":"0 0","-moz-transform":scale," -moz-transform-origin":"0 0"});//將最外層元素（#app）內(nèi)部的元素(.all)以最外層元素的左上角為遠(yuǎn)點(diǎn)進(jìn)行縮放

3、通過上面兩步，頁面中的元素可以按照比列進(jìn)行縮放了，但是字體沒有變化，這是因?yàn)樽煮w在span元素里面，它的display屬性是inline，所以縮放對(duì)它沒用，解決辦法就是把字體所在的span設(shè)置為inline-block這樣字體就可以一起縮放了。