css中長度尺寸的一些總結

2021-07-10 01:41:41 字數 538 閱讀 1176

在css中我們一般習慣使用長度單位有px,em,rem這三個,現在總結一下各自特點。

px:畫素(pixel)。是相對於螢幕解析度的長度單位,是螢幕裝置物理上能顯示出的最小的乙個點。這是我們在pc端固定布局最常用的單位了,但是使用的時候有乙個問題就是它無法隨螢幕解析度的大小改變而縮放,所以在移動端時請謹慎使用。

em:是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。所有現代瀏覽器下預設字型尺寸是16px,這時1em=16px。如果修改了當前父級元素的font-size,em的大小也會隨之改變。但是如果巢狀了太多的話em就非常難計算了。

rem(root em):css3新引進的單位,它也是相對長度單位,不過它是相對於html根元素的大小(預設還是16px)。個人感覺rem在移動端使用起來非常好用。這裡有個使用小技巧是將html選擇器中宣告font-size=62.5%,這就使rem值變為 16px*62.5%=10px,10px=1em,讓使用慣了px的人員也能很好的換算成rem使用。



CSS一些總結

1.display block 塊元素,預設寬度為100 可以設定元素的寬高,預設佔滿一行。塊元素包括div,h1 h6,form,table,ul,ol等 inline 行內元素,預設寬度為內容的寬度,width和height對inline元素無效,margin top和bottom對行內元素無效...

關於螢幕尺寸的一些問題總結

最終適配方案 尺寸優化 參考鏈結 2倍屏,3倍屏,px,dp,這些概念因為不影響開發沒有深入研究過,最近要寫乙個螢幕的工具類,就趁著這個機會徹底了解一下。螢幕上共有多少畫素點,例如 螢幕解析度是1024 768,也就是說裝置螢幕的水平方向上有1024個畫素點,垂直方向上有768個畫素點 ios預設的...

關於CSS學習的一些總結

接觸css有很長的一段時間了,我對它的感情每次都有些不同,簡單 費解 神奇 好玩 css就是這麼一門不正交的語言,你無需一步步從頭學起,它就像樂高積木,學會了一點就能用上一點。儘管css不正交,屬性也比較多不好記,但沒關係,你只要記住用的最多的幾種方法足矣應付業務中大部分需求 除了以上用的最多的幾種...