自適應PC端網頁製做使用REM

作一個PC端的網頁,設計圖是1920X1080的. 要在常見屏上顯示正常(比例正確可) 1280X720 1366X768 1440X900 1920X1080

使用了幾種辦法

1.內容在一屏內顯示的,採用了(內容框)上下左右居中的辦法,裏面的內容絕對於這個內容框定位.這樣一來,在不一樣大小屏中,內容老是在中間,看起來較正常

2.使用rem的地方

width,height,margin,padding,left top都採用了REM,

HTML的FONT-SIZE設置的爲100PX.是爲了計算方便.此時BODY的FONT-SIZE要設置爲正常值,例如14PX.否則的話,其它的DOM都會繼承HTML的100PX的FONT-SIZE,致使效果巨大.

3.當瀏覽器窗口變化時,內容的大小以及相對位置也會相應變化,這個依靠JS修改HTML的FONT-SIZE值實現.以下:

$(window).resize(function ()// 綁定到窗口的這個事件中
{

  let designSize = 1920; // 設計圖尺寸

  let html = document.documentElement;

  let wW = html.clientWidth;// 窗口寬度

  let rem = wW * 100 / designSize; 

  document.documentElement.style.fontSize = rem + 'px';

});

計算font-size的邏輯是:

     當設計圖是1920時,規定HTML的FONT-SIZE的值是100. 也就是,當瀏覽器窗口調整到1920PX時,1REM=100PX,若是要設定一個160PX(1920設計圖時)的margin-top,那麼REM設置值是1.6rem.

     當窗口調整到非設計圖的寬度如winWidth時,HTML的FONT-SIZE值是:(100/1920)*winWidth.也就是說,1920下FONT-SIZE是100px.那麼winWidth下,按比例計算.

     或者能夠這樣:窗口寬1920時,FONT-SIZE是100PX,那麼winWidth時,至關於窗口變化爲1920時的 (winWidth / 1920).根據比例公式,winWidth時的FONT-SIZE就是

             (winWidth/1920)*100

             winWidth / 1920 = FONT-SIZE(PX) / 100 

            100 / 1920 = FONT-SIZE(PX) / winWidth 這個公式容易理解

若是調整窗口大小,會發現HTML的FONT-SIZE值在變化,同時,使用REM設置的DOM也在變化.由於REM正是參考HTML的FONT-SIZE值來計算的

4.若是是在手機上,平板電腦上,更要使用REM

因爲手機上通常不會調整瀏覽器大小,因此能夠在頁面載入時,設置一次便可

$(function(){

  let designSize = 750; // 設計圖尺寸

  let html = document.documentElement;

  let wW = html.clientWidth;// 窗口寬度

  let rem = wW * 100 / designSize; 

  document.documentElement.style.fontSize = rem + 'px';

})

5.使用REM可以較好的自適應移動端

手機平板移動設備的寬度不超過1080,若是設備已經超過了這個寬度,則不該再計算html的font-size值了.由於已是PC屏幕了.

if ( window.innerWidth>1080) 

return;

6.關於字體大小

若是字體大小使用rem,因爲rem是計算出來的.因此字體大小變化會比較明顯.

例如設計稿750px,字體大小20px,那麼就是 "font-size : .2rem" ,這裏有個問題是,設計稿是2倍的,在手機上是1倍的.因而rem會小一半,這時,手機上的字體就會很是小了.

人老是但願pc屏幕上看到的文字,在手機上仍然能看得清楚,能夠接受一點縮小,但不能是鉅變.

 

一種解決方法是,字體使用2倍大小,也就是 "font-size: .4rem". 

這個方法會致使在超過設計稿寬度尺寸的屏幕上,字體變得很是大.這種狀況通常是在平板或者PC上了,若是隻是手機端使用,則不用考慮此種狀況.

 

還有個辦法是使用回em或者px,而後針對不一樣的屏幕作媒體查詢,

使用em,前提是設置body字體大小,例如 font-size:14px

這種辦法對手機端很差,平板和PC合適.能夠作媒體查詢適配小屏的em基準

@media (max-width: 320px)

{
    font-size: 12px;
}

@media (min-width: 321px)

{    font-size: 14px;}