css中的幾個單位 rem,視口單位和ch

2021-09-13 19:44:10 字數 1267 閱讀 5226

rem是設計響應式網頁的神器,因為rem單位是相對html元素的font-size屬性的,因此當使用rem作為屬性單位時,當改變html元素的font-size,其他使用rem作為單位的元素也會跟著適配大小。那麼如何根據螢幕的大小製作乙個響應式的網頁呢。

這裡先說說用css**查詢,如下面所示,螢幕查詢可以指定乙個螢幕大小,當螢幕是你指定的大小時,它就會執行裡面的**,但是這種方法有乙個缺點---它並不能控制更加精確的尺寸,所以我們可以使用vm來解決這個問題。

rem

視口單位可以用來什麼,比如:

這幾個單位是相對於視口的,也就是可視區域,總共分成了100份。如果想讓乙個字型的大小在指定的區間內變化,比如可視區域的大小在980px-320px時,讓字型的大小在14-20之間變化,可以

14-(20-14)*(980-320)/(980-320)

rem

除了用這些基於視口的單位來做響應式,還可以做一些其他的事情。我們知道,如果某個值可以繼承,則百分比參照的是父元素計算的值。而當父元素不設定高度時,則是根據子元素高度來確定的。所以,如果沒有直接設定寬度和高度,100%的設定是沒有作用的。如果用視口單位,就不會有這種情況了,因為它是相對螢幕可視區的

.box
如果要實現水平垂直居中

hello css

用視口來實現網格布局

另外,當需要將按照螢幕的比例顯示時,用視口單位也是不錯的選擇ch是乙個相對於數字0的大小,比如定義了5ch的寬度,那麼就只能裝下5個0。實際上1ch=1個英文=1個數字,2ch=1個中文。

000000

如果專案需要限制輸入個數,可以使用下面**

CSS3的vw和vh視口單位

認識視口單位 viewport units 首先,我們要了解什麼是視口。在業界,極為推崇的一種理論是 peter paul koch 江湖人稱 ppk大神 提出的關於視口的 解釋 在桌面端,視口指的是在桌面端,指的是瀏覽器的可視區域 而在移動端較為複雜,它涉及到三個視口 分別是 layout vie...

css中單位em和rem

w3cschool中給出css中尺寸單位如下 單位描述 百分比 in英吋 cm厘公尺 mm公釐 em1em 等於當前的字型尺寸。2em 等於當前字型尺寸的兩倍。例如,如果某元素以 12pt 顯示,那麼 2em 是24pt。在 css 中,em 是非常有用的單位,因為它可以自動適應使用者所使用的字型。...

css中單位em和rem

w3cschool中給出css中尺寸單位如下 單位描述 百分比 in英吋 cm厘公尺 mm公釐 em1em 等於當前的字型尺寸。2em 等於當前字型尺寸的兩倍。例如,如果某元素以 12pt 顯示,那麼 2em 是24pt。在 css 中,em 是非常有用的單位,因為它可以自動適應使用者所使用的字型。...