https://www.cnblogs.com/mirrortom/p/6808858.html
做一個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 rem = wW * 100 / designSize;
});
計算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 rem = wW * 100 / designSize;
})
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;
}