成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

weij / 607人閱讀

摘要：基于視口的單位視口單位可以用來什么，比如實(shí)現(xiàn)響應(yīng)式設(shè)置相對視口的寬度和高度，可以實(shí)現(xiàn)水平垂直居中實(shí)現(xiàn)網(wǎng)格布局將圖片按照屏幕的比例顯示這幾個單位是相對于視口的，也就是可視區(qū)域，總共分成了份。

rem

rem是設(shè)計(jì)響應(yīng)式網(wǎng)頁的神器，因?yàn)閞em單位是相對HTML元素的font-size屬性的，因此當(dāng)使用rem作為屬性單位時，當(dāng)改變HTML元素的font-size，其他使用rem作為單位的元素也會跟著適配大小。那么如何根據(jù)屏幕的大小制作一個響應(yīng)式的網(wǎng)頁呢。

用css媒體查詢

用相當(dāng)于視口寬度單位的vw值（這個下一部分講）

這里先說說用css媒體查詢，如下面所示，屏幕查詢可以指定一個屏幕大小，當(dāng)屏幕是你指定的大小時，它就會運(yùn)行里面的代碼，但是這種方法有一個缺點(diǎn)---它并不能控制更加精確的尺寸，所以我們可以使用vm來解決這個問題。



rem
vw,vh,vmin,vmax基于視口的單位

視口單位可以用來什么，比如:

實(shí)現(xiàn)響應(yīng)式

設(shè)置相對視口的寬度和高度，可以實(shí)現(xiàn)水平垂直居中

實(shí)現(xiàn)網(wǎng)格布局

將圖片按照屏幕的比例顯示

這幾個單位是相對于視口的，也就是可視區(qū)域，總共分成了100份。如果想讓一個字體的大小在指定的區(qū)間內(nèi)變化，比如可視區(qū)域的大小在980px-320px時，讓字體的大小在14-20之間變化，可以

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



rem

除了用這些基于視口的單位來做響應(yīng)式，還可以做一些其他的事情。我們知道，如果某個值可以繼承，則百分比參照的是父元素計(jì)算的值。而當(dāng)父元素不設(shè)置高度時，則是根據(jù)子元素高度來確定的。所以，如果沒有直接設(shè)置寬度和高度，100%的設(shè)置是沒有作用的。如果用視口單位，就不會有這種情況了，因?yàn)樗窍鄬ζ聊豢梢晠^(qū)的

.box{
  width:100vw;
  height:100vh;
  background-color:pink;
}

如果要實(shí)現(xiàn)水平垂直居中



hello css

用視口來實(shí)現(xiàn)網(wǎng)格布局

另外，當(dāng)需要將圖片按照屏幕的比例顯示時，用視口單位也是不錯的選擇

ch

ch是一個相對于數(shù)字0的大小，比如定義了5ch的寬度，那么就只能裝下5個0。實(shí)際上1ch=1個英文=1個數(shù)字，2ch=1個中文。

 
    

     000000

如果項(xiàng)目需要限制輸入個數(shù)，可以使用下面代碼


    

     標(biāo)題被限制輸入了，超出隱藏哦。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107874.html

相關(guān)文章

  • css中的幾個單位——rem，視口單位和ch

    摘要：基于視口的單位視口單位可以用來什么，比如實(shí)現(xiàn)響應(yīng)式設(shè)置相對視口的寬度和高度，可以實(shí)現(xiàn)水平垂直居中實(shí)現(xiàn)網(wǎng)格布局將圖片按照屏幕的比例顯示這幾個單位是相對于視口的，也就是可視區(qū)域，總共分成了份。 rem rem是設(shè)計(jì)響應(yīng)式網(wǎng)頁的神器，因?yàn)閞em單位是相對HTML元素的font-size屬性的，因此當(dāng)使用rem作為屬性單位時，當(dāng)改變HTML元素的font-size，其他使用rem作為單位的元素...

    leiyi 評論0 收藏0

  • CSS：7個你可能不認(rèn)識的單位

    摘要：原文譯文個你可能不知道的單位譯者眾所周知，當(dāng)使用技術(shù)的時候，很容被一些奇異問題給困住。今天，我就介紹一些你之前可能不知道的屬性，是一些例如和測量方面的單位，但是很有可能你之前都沒聽過這些。然而，對于每一個問題，百分比并不是最好的解決方案。 原文：7 CSS Units You Might Not Know About 譯文：7個你可能不知道的CSS單位 譯者：dwqs 眾所周知，...

    peixn 評論0 收藏0

  • CSS 單位

    摘要：概覽中的長度單位有很多，覺得有必要整理備忘。單位大體分為兩大類絕對單位，不會因?yàn)槠渌氐某叽缱兓兓Ｈ绻胧褂蔑@示窗口的寬度或高度而不是父元素的寬度將會怎么樣這正是和單位所提供的。和現(xiàn)代瀏覽器都支持這兩個單位。 概覽 CSS中的長度單位有很多，覺得有必要整理備忘。 網(wǎng)上介紹的也比較多和全，詳見參考資料。 單位大體分為兩大類： 絕對單位 ，不會因?yàn)槠渌氐某叽缱兓兓?相對...

    ARGUS 評論0 收藏0

  • css中的尺寸和單位

    摘要：前言本文主要介紹的尺寸和單位，專門查了加上自己的一些理解。比如等屬性的類型分為絕對單位和相對單位相對單位相對單位代表以其他距離為尺寸的一種單位，包括，，，，。 前言 本文主要介紹css的尺寸和單位，專門查了mdn, 加上自己的一些理解。本文參考mdn 類型 length表示距離尺寸的一種css數(shù)據(jù)格式,它由數(shù)值+單位組成，如果數(shù)值為0，單位可以省略。比如width, height, m...

    noONE 評論0 收藏0

  • css中的尺寸和單位

    摘要：前言本文主要介紹的尺寸和單位，專門查了加上自己的一些理解。比如等屬性的類型分為絕對單位和相對單位相對單位相對單位代表以其他距離為尺寸的一種單位，包括，，，，。 前言 本文主要介紹css的尺寸和單位，專門查了mdn, 加上自己的一些理解。本文參考mdn 類型 length表示距離尺寸的一種css數(shù)據(jù)格式,它由數(shù)值+單位組成，如果數(shù)值為0，單位可以省略。比如width, height, m...

    cod7ce 評論0 收藏0

發(fā)表評論

0條評論

weij

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<