日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
7個(gè)你可能不認(rèn)識(shí)的CSS單位

眾所周知CSS技術(shù)我們雖然很熟悉，在使用的過(guò)程卻很容易被困住，這讓我們?cè)谛聠?wèn)題出現(xiàn)的時(shí)候變得很不利。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的沙灣網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

隨著web繼續(xù)不斷地發(fā)展，對(duì)于新技術(shù)新解決方案的要求也會(huì)不斷增長(zhǎng)。因此，作為網(wǎng)頁(yè)設(shè)計(jì)師和前端開(kāi)發(fā)人員，我們別無(wú)選擇，必須熟悉我們手上的工具，做到知己知彼，這樣才能百戰(zhàn)不殆。

這就意味著有那么些個(gè)特別的貨，雖然平常都不怎么會(huì)用上，但是一旦某個(gè)地方需要它們了，他們就真的是特么得合適不過(guò)來(lái)了呢。

今兒，我就準(zhǔn)備向大伙兒介紹一些你們之前可能很少見(jiàn)過(guò)CSS家伙們。他們每個(gè)都是度量的單位，類似pixel 和 em 這樣的，但是很有可能你之前從來(lái)就沒(méi)聽(tīng)過(guò)這些家伙們！就讓我們一起來(lái)交個(gè)朋友吧~

rem

我們首先介紹下和我們熟悉的很相似的貨。em 被定義為相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體大小。炒個(gè)栗子，如果你給body小哥設(shè)置了font-size字體大小，那么body小哥的任何子元素的1em就是等于body設(shè)置的font-size。

 
 
    
  
  
  1.  
    2. 
  
  
  2.     Test
 
  •  

    •  
 
      
  
  
    1. body { 
      2. 
  
  
    2.     font-size: 14px; 
      3. 
  
  
    3. } 
      4. 
  
  
    4. div { 
      5. 
  
  
    5.     font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px 
      6. 
  
  
    6. } 
      7.

    你看，這里div這娃的字體大小是1.2em。解釋來(lái)說(shuō)，就是他從body爹爹那里繼承的字體大?。ㄟ@里是14px）的1.2倍，結(jié)果就是16.8px。

    但是，如果你用em一層一層級(jí)聯(lián)得定義嵌套元素的字體大小又會(huì)花生什么事情呢？在下面這一小段代碼里我們應(yīng)用了和上面一樣一樣的CSS，每一個(gè)div都從它上一級(jí)父元素繼承了字體大小，并且逐漸得增加。

     
 
      
  
  
    1.  
      2. 
  
  
    2.     
       
      3. 
  
  
    3.         Test  
      4. 
  
  
    4.         
       
      5. 
  
  
    5.             Test  
      6. 
  
  
    6.             
       
      7. 
  
  
    7.                 Test  
      8. 
  
  
    8.             
     
  •         
    •  
  •     
    •  
  •  

    • 雖然在某些地方這正是我們想要的，但是通常情況下我們還是希望就依賴單一的相對(duì)度量單位就好。這時(shí)候嘛，我們就可以使用 rem 了。 ‘r’是“root”的縮寫(xiě)，意思就是1rem等于根元素的字體大??；大部分情況下，根元素就是元素了。

     
 
      
  
  
    1. html { 
      2. 
  
  
    2.     font-size: 14px; 
      3. 
  
  
    3. } 
      4. 
  
  
    4. div { 
      5. 
  
  
    5.     font-size: 1.2rem; 
      6. 
  
  
    6. } 
      7.

    這樣在上面的那三個(gè)嵌套的div娃們的字體大小都是 1.2*14px = 16.8px 了。

    適用于網(wǎng)格布局

    Rems 不僅僅只是在設(shè)置字體大小上很方便。再炒個(gè)栗子，你可以用基于html根元素字體大小的rem作為整個(gè)網(wǎng)格布局或者UI庫(kù)的大小單位，然后在其他特定的地方用em單位。這樣將會(huì)給你帶來(lái)更多的字體大小和伸縮的可控性。

     
 
      
  
  
    1. .container { 
      2. 
  
  
    2.     width: 70rem; // 70 * 14px = 980px 
      3. 
  
  
    3. } 
      4.

    概念上來(lái)說(shuō)，這個(gè)方法的思想就是讓你的界面根據(jù)你的內(nèi)容進(jìn)行縮放。但是，這樣做并不是對(duì)所有的情況都有意義。

    vh and vw

    響應(yīng)式web設(shè)計(jì)離不開(kāi)百分比。但是，CSS百分比并不是所有的問(wèn)題的***解決方案。CSS的寬度是相對(duì)于包含它的最近的父元素的寬度的。但是如果你就想用視口（viewpoint）的寬度或者高度，而不是父元素的，那該腫么辦？ 這就是 vh 和 vw 單位為我們提供的。

    1vh 等于1/100的視口高度。栗子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。同理，如果視口寬度未750， 1vw = 750px/100 = 7.5 px。

    可以想象到的，他們有很多很多的用途。比如，我們用很簡(jiǎn)單的方法只用一行CSS代碼就實(shí)現(xiàn)同屏幕等高的框。

     
 
      
  
  
    1. .slide { 
      2. 
  
  
    2.     height: 100vh; 
      3. 
  
  
    3. } 
      4.

    假設(shè)你要來(lái)一個(gè)和屏幕同寬的標(biāo)題，你只要設(shè)置這個(gè)標(biāo)題的font-size的單位為vm，那標(biāo)題的字體大小就會(huì)自動(dòng)根據(jù)瀏覽器的寬度進(jìn)行縮放，以達(dá)到字體和viewport大小同步的效果，有木有？！

    vmin and vmax

    vh和 vm 依據(jù)于視口的高度和寬度，相對(duì)的，vmin 和 vmax則關(guān)于視口高度和寬度兩者的最小或者***值。比如，瀏覽器的寬度設(shè)置為1100px，高度設(shè)置為700px， 1vmin = 1px， 1vmax = 11px。如果寬度設(shè)置為800px,高度設(shè)置為1080px, 1vmin就等于8px, 1vmax則未10.8px。

    那么問(wèn)題來(lái)了，我們應(yīng)該在什么場(chǎng)景下使用這兩個(gè)單位呢？

    假設(shè)有一個(gè)元素，你需要讓它始終在屏幕上可見(jiàn)。只要對(duì)其高度和寬度使用vmin單位，并賦予其低于100的值就可以做到了。再來(lái)個(gè)栗子，可以這樣定義一個(gè)至少有兩個(gè)邊觸摸到屏幕的方形：

     
 
      
  
  
    1. .box { 
      2. 
  
  
    2.     height: 100vmin; 
      3. 
  
  
    3.     width: 100vmin; 
      4. 
  
  
    4. } 
      5.

    如果你要讓這個(gè)方形框框始終鋪滿整個(gè)視口的可見(jiàn)區(qū)域（四邊始終觸摸到屏幕的四邊）

     
 
      
  
  
    1. .box { 
      2. 
  
  
    2.     height: 100vmax; 
      3. 
  
  
    3.     width: 100vmax; 
      4. 
  
  
    4. } 
      5.

    結(jié)合使用這些單位可以為我們提供一個(gè)新穎有意思的方式來(lái)靈活地利用我們視口的大小。

    ex and ch

    ex 和 ch 單位，類似于 em 和 rem, 依賴于當(dāng)前的字體和字體大小。 但是，不同的是，這兩貨是基于字體的度量單位，依賴于設(shè)定的字體。

    ch 單位通常被定義為數(shù)字0的寬度。你可以在Eric Meyers的博客里找到關(guān)于它的一些有意思的討論，例如將一個(gè)等寬字體的字母”N”的寬度設(shè)置為40ch，那么在另一種類型的字體里它卻可以包含40個(gè)字母。這個(gè)單位的傳統(tǒng)用途主要是盲文的排版，但是除此之外，肯定還有可以應(yīng)用他的地方。

    ex 定義為當(dāng)前字體的小寫(xiě)x字母的高度或者 1/2 的 1em。 很多時(shí)候，它是字體的中間標(biāo)志。

    x-height; the height of the lower case x

    這些單位有很多用途，大部分用于版式的微調(diào)。比方說(shuō)，sup 元素（上角文字標(biāo)），可以通過(guò)position:relative;bottom: 1ex;實(shí)現(xiàn) 。類似的方法，你可以實(shí)現(xiàn)一個(gè)下角文字標(biāo)。瀏覽器默認(rèn)的方式是利用

    上標(biāo)和下標(biāo)特定垂直對(duì)齊規(guī)則，但是如果你想更細(xì)粒度更精確得控制，你可以像下面這樣做：

     
 
      
  
  
    1. sup { 
      2. 
  
  
    2.     position: relative; 
      3. 
  
  
    3.     bottom: 1ex; 
      4. 
  
  
    4. } 
      5. 
  
  
    5. sub { 
      6. 
  
  
    6.     position: relative; 
      7. 
  
  
    7.     bottom: -1ex; 
      8. 
  
  
    8. } 
      9.

    結(jié)論

    持續(xù)關(guān)注不斷發(fā)展壯大的CSS技術(shù)無(wú)疑是很重要的，這樣你才能掌握你所持有的工具的全部技能。說(shuō)不定將來(lái)你遇到的某個(gè)特殊的問(wèn)題就需要使用這些復(fù)雜的單位來(lái)解決?；c(diǎn)時(shí)間去閱讀新的技術(shù)規(guī)范，注冊(cè)訂閱一些不錯(cuò)的網(wǎng)站或者資源，類似 cssweekly這樣的。 當(dāng)然不要忘記現(xiàn)在就去注冊(cè)像TUTS +這樣的網(wǎng)站來(lái)獲取每周的更新，課程，免費(fèi)教程還有資源！


    本文名稱：7個(gè)你可能不認(rèn)識(shí)的CSS單位
    網(wǎng)頁(yè)URL：http://www.dlmjj.cn/article/djoejho.html