我的前端學習筆記 關於em和rem的使用

2021-07-04 06:55:12 字數 830 閱讀 5691

因為在公司以後都是移動端前端開發,傳統的用px作為單位顯然不切實際。因此我們要使用相對單位em和rem。

這兩個其實沒什麼本質區別,只是相對的不一樣。em 是以父元素的字型大小為參照。比如父元素是12px,你給子元素1em,他其實就是12px長。

下面舉例說明:這是html的結構

aa2b

c

賦給他們不同的em值,他們實際的值如注釋所示

#fa

#a /*20px*/

#a2 /*16px*/

#b /*16px*/

#c /*12*0.8*/

當我們寫頁面的時候比如父元素是20px,設計稿要畫乙個200px*200px的框,那麼就是把width:10em;height:10em就可以。值得注意的是如果你設定了那個框的字型。那麼width和height都會隨字型大小改變。這也是初學容易遇到的問題。比如我設定font-size為2em那麼其實就是40px;則width和height都要設定成5em才會還原設計稿的內容。

這樣計算顯然很麻煩,所以有了rem這個單位。

rem始終根據瀏覽器根節點字型來選取值,比如你設定瀏覽器字型為12px以後,你之後所有計算都是px除以12就可以,非常方便,不用擔心因為設定字型導致div變形。

另外很多人喜歡把根節點設定成10px這樣計算特別方便,但是要注意其實這樣做未必可取,因為chrome最小字型是12px所以在chrome並不齊作用,你的1em 還是相當於12px而不是10px。

用rem作為單位顯然很有優勢,是移動端開發適配的小幫手。

EM和HMM學習筆記

1.em expectition maximum 期望最大化演算法,由於已知資料中有未觀察到的隱含資料,所以需要猜想隱含資料,進而求模型引數。e為期望步,計算模型的期望值問題 m步為求最大化問題,以此類推,不斷迭代。2.hmm hidden markov model 隱馬爾夫模型,hmm解決的問題有...

我的前端學習筆記 關於js資料型別

整理自 在實際的專案應用中,typeof只有兩個用途,就是檢測乙個元素是否為undefined,或者是否為function。value function typeof foo string string new string foo string object 1.2 number number n...

我的前端學習之路

轉眼間就到大三的暑假了,開始我現在的實習 耽擱許久的部落格也終於開始動手寫了,目前暑假實習於厚溥公司 這個部落格主要是記錄我在實習期間學習的過程和一些總結。html的定義 html又稱為超文字標記語言,它不是一種程式語言,而是一種指令碼語言 html的基本結構 html分為兩類 一類是具有開始標籤和...