如何在專案PC端和手機端使用的rem,怎麼設定
做一個PC端的網頁,設計圖是1920X1080的. 要在常見屏上顯示正常(比例正確可) 1280X720 1366X768 1440X900 1920X1080
使用了幾種辦法
1.內容在一屏內顯示的,採用了(內容框)上下左右居中的辦法,裡面的內容絕對於這個內容框定位.這樣一來,在不同大小屏中,內容總是在中間,看起來較正常
2.長,寬,LEFT,TOP,RIGHT,BOTTOM都採用了REM,並且HTML的FONT-SIZE設定的是100PX一是覺得計算方便,二是如果設為10PX,谷歌會不相容.此時BODY的FONT-SIZE設定為正常值,12PX.不然的話,其它的DOM都會繼承HTML的100PX的FONT-SIZE,導致效果巨大.
3.當瀏覽器視窗變化時,內容的大小以及相對位置也會相應變化,這個依靠JS修改HTML的FONT-SIZE值實現.如下:
$(window).resize(function ()// 繫結到視窗的這個事件中
{
var whdef = 100/1920;// 表示1920的設計圖,使用100PX的預設值
var wH = window.innerHeight;// 當前視窗的高度
var wW = window.innerWidth;// 當前視窗的寬度
var rem = wW * whdef;// 以預設比例值乘以當前視窗寬度,得到該寬度下的相應FONT-SIZE值
$('html').css('font-size', rem + "px");
});
計算font-size的邏輯是:
當設計圖是1920時,規定HTML的FONT-SIZE的值是100. 也就是,當瀏覽器視窗調整到1920PX時,1REM=100PX,如果要設定一個16PX(1920設計圖時)的字型,那麼REM設定值是0.16.
當視窗調整到非設計圖的寬度如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(){
var whdef = 50/750;// 表示750的設計圖,使用50PX的預設值
var wH = window.innerHeight;// 手機視窗的高度
var wW = window.innerWidth;// 手機視窗的寬度
var rem = wW * whdef;// 以預設比例值乘以當前視窗寬度,得到該寬度下的相應FONT-SIZE值
$('html').css('font-size', rem + "px");
})
5.使用REM是個有效的辦法,加上BOOTSTRAP SWIPER這些工具,可以比較省事的做出一些簡單的效果