less知識(shí)
- 簡(jiǎn)書鏈接
- less使用總結(jié)：less基礎(chǔ)知識(shí)
- less使用總結(jié)2：less使用總結(jié)
- 單位px,em,rem講解
- 鏈接文檔：分析單位文檔;
- 任意瀏覽器的默認(rèn)字體高都是16px碴里。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。
- 一般瀏覽器在設(shè)置時(shí)上真，給html或body設(shè)置
font-size:百分?jǐn)?shù);-
font-size: 62.5%;:指的是當(dāng)前瀏覽器中的字體高度為62.5%*16px=10px;即：1em=10px; -
font-size: 87.5%;:指的是當(dāng)前瀏覽器中的字體高度為87.5%*16px=14px;即：1em=14px;
-
- em單位是相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸咬腋，如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸睡互，國外使用比較多
- rem單位是相對(duì)于html根標(biāo)簽的字體大小進(jìn)行取值根竿；
- 在一般的PC端網(wǎng)頁制作過程中陵像，px和em用的比較多，在移動(dòng)端一般采用rem寇壳。
- 以上的算法醒颖，指的是所有瀏覽器下的字體值都是定值，不適用于不同的瀏覽器中壳炎；
- 實(shí)際開發(fā)中會(huì)規(guī)定好在制定屏幕下的字體大信⑶浮；一般在320px的瀏覽器屏幕中匿辩，會(huì)放大一倍腰耙，即640px屏幕下制作，然后設(shè)置的字體大小為定值撒汉，通過比例沟优，讓其在不同的屏幕下，也按比例縮放睬辐；
//獲取可視區(qū)域的寬度 var $screenWidth=$(window).width(); //在實(shí)際開發(fā)中會(huì)規(guī)定好在制定屏幕下的字體大心痈蟆；一般在320px的瀏覽器屏幕中溯饵，會(huì)放大一倍侵俗，即640px屏幕下制作，然后設(shè)置的字體大小為定值丰刊，通過比例隘谣，讓其在不同的屏幕下，也按比例縮放啄巧； var kfWidth=640; var fSize=100; //jQuery中獲取html根標(biāo)簽 var $html=$("html");//在原生JS中獲取html標(biāo)簽：document.documentElement; var $htmlFont; $htmlFont=$screenWidth/kfWidth*fSize; //jQuery中設(shè)置html的字體大小 $html.css("fontSize",$htmlFont); //原生JS中設(shè)置字體大小 document.documentElement.style.fontSize=$htmlFont+"px";
