rem px em實踐中用法

2022-09-04 11:12:09 字數 1311 閱讀 5045

1.css中單位非常多,px、rem、%應該是用的最多的,em要慎用,最近還看到vw、vh。

在實踐過程中,使用rem,一定要記得結合html元素,設定font-size;

html

如果你不寫,你會發現在谷歌和ie瀏覽器下,你的布局大部分都亂了。因為谷歌預設的是16px,而ie8是12。所以有時候需要你自己做統一。(今天畫頁面就遇到了這個問題,但是是ie11,我也不太清楚是**我設定出了問題,ie11的rem值為12了,所以最好還是設計的時候直接統一,節省很多事情)。谷歌預設最小字型是12px,設定再小,也只會顯示為12px的大小。

我最近畫頁面,也看到一些文章對這些單位的總結,所以自己也整合一下思路。

★在視覺上需要固定尺寸的,使用px。比如我們經常畫1px的線,5px的圓角邊框。

★在大多數間距、字型大小上使用rem。

★em一般要慎用。(跟它的計算方式有關)

★%使用場景就比較固定,它是參考父級容器,一般寫多少比多少的布局情況下會使用。

★vm、vh是參考視口。1vm=1%視口,當需要匹配視口大小的時候,再使用。

慎用em,完全是由於它的計算原理,它是根據當前元素的字型大小比例計算的。

span 

//html

<

span

>

abc

<

span

>def

span

>

abc<

span

>

外層span字型大小是16px(瀏覽器預設值),所以1.5em之後就是24px;由於字型大小是繼承的,導致裡層span繼承24px,並且要1.5x24px=36px;

對於rem使用,我們布局的時候使用margin、padding等距離設定,然後我們有設定html,假設我們是根據寬度為1000px的稿子來設計的,當我們要適配其他的任意寬度的螢幕的時候,我們可以直接計算font-szie為多少來修改,可以減少很多**量。比如說適配500的螢幕,fontsize=devicewidth*16/1000=8px;那麼可以這樣寫

@media(min-width:500px)

使用這個之前html上一定要設定"viewport"content="width=device-width,

initial-scale=1.0, maximum-scale=1.0,

user-scalable=0,user-scalable=no">

為了手機使用者更好的體驗,我們甚至可以把font-size設定為百分比,比如62.5%;因為1/16=62.5%;這樣手機使用者改變手機設定也能改變字型大寫。

在實踐中學習

轉眼時間過得飛快,大學四年就像夢一樣過去了,當初惴惴不安地擔心自己能不能過畢業設計,稀里糊塗畢業證都已經拿到了手上。經過了被乙個非常有前途的單位放了鴿子,當初全力去拼搶的東西到頭來全是泡影,還好大學裡也不是全部都稀里糊塗,也學了點皮毛,找了對口的程式設計工作。可是,技術畢竟不高,在這裡,壓力很大。有...

java 實踐中的問題

1 int等值與string之間的轉換 用string.valueof 方法將boolean char int double float long char等轉化為字串 用int i integer.parseint string s,int radix 或int i integer.parsein...

實踐中的各種問題

1.今天遇到了url的編碼問題 將字串以 url 編碼。例如空格就會變成加號,當我們傳入的引數中含有空格時,在伺服器端接收到的是空格轉成了 符的字串,導致失配,妹妹的!這麼搞也不事先說一聲,問題找的好辛苦,這時我們將用到乙個函式rawurlencode 他可以將空格等字元正確的轉義,變成 20等 這...