淺談pc端rem字體設(shè)置的問題
1、內(nèi)容在一屏內(nèi)顯示的,采用了(內(nèi)容框)上下左右居中的辦法,里面的內(nèi)容絕對于這個內(nèi)容框定位.這樣一來,在不同大小屏中,內(nèi)容總是在中間,看起來較正常
2、長,寬,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE設(shè)置的是100PX一是覺得計算方便,二是如果設(shè)為10PX,谷歌會不兼容.此時BODY的FONT-SIZE設(shè)置為正常值,12PX.不然的話,其它的DOM都會繼承HTML的100PX的FONT-SIZE,導(dǎo)致效果巨大。
3、當(dāng)瀏覽器窗口變化時,內(nèi)容的大小以及相對位置也會相應(yīng)變化,這個依靠JS修改HTML的FONT-SIZE值實現(xiàn).如下:
$(window).resize(function ()// 綁定到窗口的這個事件中 { var whdef = 100/1920;// 表示1920的設(shè)計圖,使用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"); });
如果調(diào)整窗口大小,會發(fā)現(xiàn)HTML的FONT-SIZE值在變化,同時,使用REM設(shè)置的DOM也在變化。REM正是參考HTML的FONT-SIZE值來計算的
4、如果是在手機上,平板電腦上,更要使用REM,由于手機上一般不會調(diào)整瀏覽器大小,所以可以在頁面載入時,設(shè)置一次即可
$(function(){ var whdef = 50/750;// 表示750的設(shè)計圖,使用50PX的默認(rèn)值 var wH = window.innerHeight;// 手機窗口的高度 var wW = window.innerWidth;// 手機窗口的寬度 var rem = wW * whdef;// 以默認(rèn)比例值乘以當(dāng)前窗口寬度,得到該寬度下的相應(yīng)FONT-SIZE值 $('html').css('font-size', rem + "px"); })
以上這篇淺談pc端rem字體設(shè)置的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript常用基礎(chǔ)知識強化學(xué)習(xí)
這篇文章主要介紹了JavaScript常用基礎(chǔ)知識強化學(xué)習(xí),需要的朋友可以參考下2015-12-12JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)
下面小編就為大家?guī)硪黄狫S處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10