淺談pc端rem字體設(shè)置的問(wèn)題
1、內(nèi)容在一屏內(nèi)顯示的，采用了(內(nèi)容框)上下左右居中的辦法，里面的內(nèi)容絕對(duì)于這個(gè)內(nèi)容框定位.這樣一來(lái)，在不同大小屏中，內(nèi)容總是在中間，看起來(lái)較正常
2、長(zhǎng)，寬，LEFT，TOP，RIGHT，BOTTOM都采用了REM，并且HTML的FONT-SIZE設(shè)置的是100PX一是覺(jué)得計(jì)算方便，二是如果設(shè)為10PX，谷歌會(huì)不兼容.此時(shí)BODY的FONT-SIZE設(shè)置為正常值，12PX.不然的話，其它的DOM都會(huì)繼承HTML的100PX的FONT-SIZE，導(dǎo)致效果巨大。
3、當(dāng)瀏覽器窗口變化時(shí)，內(nèi)容的大小以及相對(duì)位置也會(huì)相應(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");
});
如果調(diào)整窗口大小，會(huì)發(fā)現(xiàn)HTML的FONT-SIZE值在變化，同時(shí)，使用REM設(shè)置的DOM也在變化。REM正是參考HTML的FONT-SIZE值來(lái)計(jì)算的
4、如果是在手機(jī)上，平板電腦上，更要使用REM，由于手機(jī)上一般不會(huì)調(diào)整瀏覽器大小，所以可以在頁(yè)面載入時(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");
})
以上這篇淺談pc端rem字體設(shè)置的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序畫(huà)布顯示圖片繪制矩形選區(qū)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-05-05
JavaScript對(duì)象創(chuàng)建模式實(shí)例匯總
這篇文章主要介紹了JavaScript對(duì)象創(chuàng)建模式,結(jié)合實(shí)例形式總結(jié)分析了JavaScript常見(jiàn)的對(duì)象創(chuàng)建模式,包括工廠模式、構(gòu)造函數(shù)模式、原型模式、動(dòng)態(tài)原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造函數(shù)模式等,需要的朋友可以參考下2016-10-10![Javascript的console['''']常用輸入方法匯總](http://img.jbzj.com/images/xgimg/bcimg2.png)
Javascript的console['''']常用輸入方法匯總
本文給大家?guī)?lái)了十幾種Javascript的console['']常用輸入方法，每種方法給大家介紹的都很詳細(xì)，需要的朋友參考下吧2018-04-04
js命名應(yīng)遵循簡(jiǎn)潔、語(yǔ)義化的原則,下面這篇文章主要給大家介紹了關(guān)于JavaScript命名約定的最佳實(shí)踐指南,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
基于javascript html5實(shí)現(xiàn)3D翻書(shū)特效
這篇文章主要介紹了基于javascript html5實(shí)現(xiàn)翻書(shū)特效的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了詳解webpack 熱更新優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
如何判斷微信內(nèi)置瀏覽器(通過(guò)User Agent實(shí)現(xiàn))
在進(jìn)行微信公眾賬號(hào)開(kāi)發(fā)的時(shí)候，需要知道當(dāng)前的瀏覽器是微信內(nèi)置的瀏覽器，那么如何判斷呢？這是就只有通過(guò)瀏覽器的User Agent來(lái)進(jìn)行判斷了2014-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript適配器模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Map是一組鍵值對(duì)的結(jié)構(gòu),具有極快的查找速度,下面這篇文章主要給大家介紹了關(guān)于JS利用map整合雙數(shù)組的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)小時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03