国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

css中的幾個(gè)單位——rem，視口單位和ch

leiyi / 2851人閱讀

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

rem

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

用css媒體查詢(xún)

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

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



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

視口單位可以用來(lái)什么，比如:

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

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

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

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

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

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



rem

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

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

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



hello css

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

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

ch

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

 
    

     000000

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


    

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113403.html

相關(guān)文章

  • css中的幾個(gè)單位——rem，視口單位和ch

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

    weij 評(píng)論0 收藏0

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

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

    peixn 評(píng)論0 收藏0

  • CSS 單位

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

    ARGUS 評(píng)論0 收藏0

  • css中的尺寸和單位

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

    noONE 評(píng)論0 收藏0

  • css中的尺寸和單位

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

    cod7ce 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

leiyi

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<