寫在前面
我們在前端切頁面的時(shí)候經(jīng)常會被要求適配各種比例的屏幕，那么我們該怎么做呢？
做一個(gè)PC端的網(wǎng)頁,設(shè)計(jì)圖是1920X1080的. 要在常見屏上顯示正常(比例正確可) 1280X720 1366X768 1440X900 1920X1080
使用了以下幾種方案
1.內(nèi)容在一屏內(nèi)顯示的,采用了(內(nèi)容框)上下左右居中的辦法,里面的內(nèi)容絕對于這個(gè)內(nèi)容框定位.這樣一來,在不同大小屏中,內(nèi)容總是在中間,看起來較正常
2.長,寬,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE設(shè)置的是100PX一是覺得計(jì)算方便,二是如果設(shè)為10PX,谷歌會不兼容.此時(shí)BODY的FONT-SIZE設(shè)置為正常值,12PX.不然的話,其它的DOM都會繼承HTML的100PX的FONT-SIZE,導(dǎo)致效果巨大.
3.當(dāng)瀏覽器窗口變化時(shí),內(nèi)容的大小以及相對位置也會相應(yīng)變化,這個(gè)依靠JS修改HTML的FONT-SIZE值實(shí)現(xiàn).如下:
$(window).resize(function () // 綁定到窗口的這個(gè)事件中
{
var whdef = 100/1920;// 表示1920的設(shè)計(jì)圖,使用100PX的默認(rèn)值
var wH = window.innerHeight;// 當(dāng)前窗口的高度
var wW = window.innerWidth;// 當(dāng)前窗口的寬度
var rem = wW * whdef;// 以默認(rèn)比例值乘以當(dāng)前窗口寬度,得到該寬度下的相應(yīng)FONT-SIZE值
$('html').css('font-size', rem + "px");
});
計(jì)算font-size的邏輯是:
當(dāng)設(shè)計(jì)圖是1920時(shí),規(guī)定HTML的FONT-SIZE的值是100. 也就是,當(dāng)瀏覽器窗口調(diào)整到1920PX時(shí),1REM=100PX,如果要設(shè)定一個(gè)16PX(1920設(shè)計(jì)圖時(shí))的字體,那么REM設(shè)置值是0.16.
當(dāng)窗口調(diào)整到非設(shè)計(jì)圖的寬度如winWidth時(shí),HTML的FONT-SIZE值是:(100/1920)*winWidth.也就是說,1920下FONT-SIZE是100px.那么winWidth下,按比例計(jì)算.
或者可以這樣:窗口寬1920時(shí),FONT-SIZE是100PX,那么winWidth時(shí),相當(dāng)于窗口變化為1920時(shí)的 (winWidth / 1920).根據(jù)比例公式,winWidth時(shí)的FONT-SIZE就是 (winWidth/1920)*100
winWidth / 1920 = FONT-SIZE(PX) / 100
100 / 1920 = FONT-SIZE(PX) / winWidth 這個(gè)公式容易理解
如果調(diào)整窗口大小,會發(fā)現(xiàn)HTML的FONT-SIZE值在變化,同時(shí),使用REM設(shè)置的DOM也在變化.因?yàn)镽EM正是參考HTML的FONT-SIZE值來計(jì)算的.
2、手機(jī)上,平板電腦上,更要使用REM,由于手機(jī)上一般不會調(diào)整瀏覽器大小,
所以可以在頁面載入時(shí),設(shè)置一次即可
$(function(){
var whdef = 50/750;// 表示750的設(shè)計(jì)圖,使用50PX的默認(rèn)值
var wH = window.innerHeight;// 手機(jī)窗口的高度
var wW = window.innerWidth;// 手機(jī)窗口的寬度
var rem = wW * whdef;// 以默認(rèn)比例值乘以當(dāng)前窗口寬度,得到該寬度下的相應(yīng)FONT-SIZE值
$('html').css('font-size', rem + "px");
})
- 如下的計(jì)算單位（像素）計(jì)算單位為1rem=75px;
!function(N,M){function L(){var a=I.getBoundingClientRect().width;a/F>540&&(a=540*F);var d=a/10;I.style.fontSize=d+"px",D.rem=N.rem=d}var K,J=N.document,I=J.documentElement,H=J.querySelector('meta[name="viewport"]'),G=J.querySelector('meta[name="flexible"]'),F=0,E=0,D=M.flexible||(M.flexible={});if(H){console.warn("將根據(jù)已有的meta標(biāo)簽來設(shè)置縮放比例");var C=H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);C&&(E=parseFloat(C[1]),F=parseInt(1/E))}else{if(G){var B=G.getAttribute("content");if(B){var A=B.match(/initial\-dpr=([\d\.]+)/),z=B.match(/maximum\-dpr=([\d\.]+)/);A&&(F=parseFloat(A[1]),E=parseFloat((1/F).toFixed(2))),z&&(F=parseFloat(z[1]),E=parseFloat((1/F).toFixed(2)))}}}if(!F&&!E){var y=N.navigator.userAgent,x=(!!y.match(/android/gi),!!y.match(/iphone/gi)),w=x&&!!y.match(/OS 9_3/),v=N.devicePixelRatio;F=x&&!w?v>=3&&(!F||F>=3)?3:v>=2&&(!F||F>=2)?2:1:1,E=1/F}if(I.setAttribute("data-dpr",F),!H){if(H=J.createElement("meta"),H.setAttribute("name","viewport"),H.setAttribute("content","initial-scale="+E+", maximum-scale="+E+", minimum-scale="+E+", user-scalable=no"),I.firstElementChild){I.firstElementChild.appendChild(H)}else{var u=J.createElement("div");u.appendChild(H),J.write(u.innerHTML)}}N.addEventListener("resize",function(){clearTimeout(K),K=setTimeout(L,300)},!1),N.addEventListener("pageshow",function(b){b.persisted&&(clearTimeout(K),K=setTimeout(L,300))},!1),"complete"===J.readyState?J.body.style.fontSize=12*F+"px":J.addEventListener("DOMContentLoaded",function(){J.body.style.fontSize=12*F+"px"},!1),L(),D.dpr=N.dpr=F,D.refreshRem=L,D.rem2px=function(d){var c=parseFloat(d)*this.rem;return"string"==typeof d&&d.match(/rem$/)&&(c+="px"),c},D.px2rem=function(d){var c=parseFloat(d)/this.rem;return"string"==typeof d&&d.match(/px$/)&&(c+="rem"),c}}(window,window.lib||(window.lib={}));
