1. 程式人生 > >第三次web作業

第三次web作業

css 單位 分辨率 空間 div too pix html tool

em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置,則相對於瀏覽器的默認字體尺寸,最初是指字母M的寬度,故名em。現指的是字符寬度的倍數,用法類似百分比,如:0.5em, 1em,2em等,通常1em=16px。

  rem(root em,根em):是CSS3新增的一個相對單位,相對的只是HTML根元素,可以只修改根元素就可以成比例地調整所有字體大小,又可以避免字體大小逐層復合的連鎖反應。兼容性IE9+都可以兼容,對於不兼容的瀏覽器寫一個絕對單位的聲明就可以了。

  fr 單位是一個自適應單位,fr單位被用於在一系列長度值中分配剩余空間,如果多個已指定了多個部分,則剩下的空間根據各自的數字按比例分配。

 px全稱Pixel,譯:像素。它相對長度單位,像素 px 是相對於顯示器屏幕分辨率而言的

  px,em,rem的區別在哪?

  Px是一個絕對字體大小,em則是基於基數(比如:1.5em)來計算出來的相對字體大小。這個基數是需要乘以當前對象從其父級遺傳字體大小。

  1.5em = 父級字體大小 * 1.5 = ?

  不過,這有個問題就是在css中想要知道當前元素的字體大小所遺傳的是哪個父級元素的字號。因此,rem的出現就很好的解決了這個問題。rem是基於根節點(比如html)的字體大小進行計算的。

   1.5rem = 默認字體大小 (比如: 16px) * 1.5 = 24px

  這個默認字體大小是依據你網站當前訪問時所使用的瀏覽器或者其他設備來決定的,對於桌面瀏覽器默認是16px的字體大小。然後你現在要轉換當前元素的字體大小為rem的時候你就可以這樣做:

   28px = 28/16 = 1.75rem

  為了更方便的進行計算轉換,你可以把默認字體大小設置成62.5%或者是10px,這個時候你要計算當前元素字體大小的時候,你就可以這樣:

  28px = 28/10 = 2.8rem   常用顏色對照表地址:http://tool.oschina.net/commons?type=3   我經常用瀏覽器自帶的顏色表,win10自帶的的3D畫圖,可以查看rgb和16進制   技術分享圖片

第三次web作業