欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談pc端rem字體設(shè)置的問題

 更新時(shí)間:2017年08月03日 08:10:19   投稿:jingxian  
下面小編就為大家?guī)?lái)一篇淺談pc端rem字體設(shè)置的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

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一是覺得計(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è)置的問題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript實(shí)現(xiàn)留言板添加刪除留言

    JavaScript實(shí)現(xiàn)留言板添加刪除留言

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)留言板添加刪除留言,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • js文件Cookie存取值示例代碼

    js文件Cookie存取值示例代碼

    這篇文章主要介紹了js文件Cookie存取值的使用,需要的朋友可以參考下
    2014-02-02
  • JS重要知識(shí)點(diǎn)小結(jié)

    JS重要知識(shí)點(diǎn)小結(jié)

    這里列出了一些JS重要知識(shí)點(diǎn)(不全面,但自己感覺很重要)。徹底理解并掌握這些知識(shí)點(diǎn),對(duì)于每個(gè)想要深入學(xué)習(xí)JS的朋友應(yīng)該都是必須的
    2011-11-11
  • sencha ext js 6 快速入門(必看)

    sencha ext js 6 快速入門(必看)

    下面小編就為大家?guī)?lái)一篇sencha ext js 6 快速入門(必看)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2016-06-06
  • 小程序wx.getUserProfile接口的具體使用

    小程序wx.getUserProfile接口的具體使用

    最近微信小程序?qū)τ趯徍诵〕绦蛱岢隽藥в衱x.login、wx.getUserInfo接口的調(diào)整,并提出了一個(gè)新的接口供開發(fā)者調(diào)用,本文就詳細(xì)的介紹一下如何使用,感興趣的可以了解一下
    2021-06-06
  • JavaScript常用基礎(chǔ)知識(shí)強(qiáng)化學(xué)習(xí)

    JavaScript常用基礎(chǔ)知識(shí)強(qiáng)化學(xué)習(xí)

    這篇文章主要介紹了JavaScript常用基礎(chǔ)知識(shí)強(qiáng)化學(xué)習(xí),需要的朋友可以參考下
    2015-12-12
  • JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)

    JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)

    下面小編就為大家?guī)?lái)一篇JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-10-10
  • JavaScript DOM事件(筆記)

    JavaScript DOM事件(筆記)

    這篇文章主要介紹了JavaScript DOM事件(筆記) ,需要的朋友可以參考下
    2015-04-04
  • 關(guān)于js數(shù)組去重的問題小結(jié)

    關(guān)于js數(shù)組去重的問題小結(jié)

    在項(xiàng)目開發(fā)過程中經(jīng)常會(huì)遇到數(shù)組中包含很多重復(fù)的內(nèi)容,即臟數(shù)據(jù)去臟的操作,本文著重講解了數(shù)組去重的幾種方法。需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助
    2014-01-01
  • JavaScript初學(xué)者的10個(gè)迷你技巧

    JavaScript初學(xué)者的10個(gè)迷你技巧

    雖然JavaScript有很多的編程方法,但這里只挑選了10個(gè)技巧,這些技巧對(duì)初學(xué)者理解JavaScript來(lái)說是很好的的起點(diǎn)。
    2010-09-09

最新評(píng)論