亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)

  發(fā)布時間：2023-08-06 15:48:14   作者：xiaowu1127   我要評論
px單位是絕對單位，一般用于pc端網(wǎng)頁開發(fā),因為是絕對單位所以在移動端上的使用體驗并不是很好,rem它是描述相對于當前根元素字體尺寸，是相對單位,它可以根據(jù)根元素的變換而變換，根元素一般指的是html的font-size，默認值是1rem=16px

 一、px像素單位

px單位是絕對單位，一般用于pc端網(wǎng)頁開發(fā)。因為是絕對單位所以在移動端上的使用體驗并不是很好

舉例：

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

pc端

 移動端

 px單位在pc端都是200px，并沒有隨著屏幕尺寸而變換

二、rem單位

rem它是描述相對于當前根元素字體尺寸，是相對單位。它可以根據(jù)根元素的變換而變換，根元素一般指的是html的font-size，默認值是1rem=16px

舉例：

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 5.3333rem;
            height: 5.3333rem;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

pc端：

手機端：

 rem單位是相對單位所以可以很好的適配手機端

三、vw和wh單位

vw跟wh單位是指相對于視口的寬度視口的寬度或者高度的長度單位。1vw為視口寬度的百分號之一，1vh為視口長度的百分之一。vw跟vh是根據(jù)視口尺寸而變化的所以常用于手機端。vw跟wh不能同時作用與一個元素上

舉例：

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 26.6667vw;
            height: 26.6667vw;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

手機端：

 

 這是vw的舉例說明而vh也是如此，盒子的vw單位沒變但是隨著手機屏幕大小發(fā)生改變，盒子的大小也發(fā)生了改變。

web前端常用長度單位（px，em，rem，pt）

px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

 em是相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸，最初是指字母M的寬度，故名em?，F(xiàn)指的是字符寬度的倍數(shù)，用法類似百分比，如：0.5em, 1em,2em等，通常1em=16px，為了簡化font -size的換算，可以在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?6px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。 

em有如下特點：

 因為“em”就是一個相對值，em的值并不是固定的；

 em會繼續(xù)父級元素的字體大小。

 計算公式：1 ÷ 父元素的字體大小 × 需要轉換的像素值 = em值，這樣的情況下“1.4em”可以            是“14px”,也可以是“20px”，或者說是“24px”。

 rem（root em，根em）：是CSS3新增的一個相對單位，相對的只是HTML根元素，可以只修改根元素就可以成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。兼容性IE9+都可以兼容，對于不兼容的瀏覽器寫一個絕對單位的聲明就可以了。

 3、pt (point，磅)：是一個物理長度單位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

 px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

 em是相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸，最初是指字母M的寬度，故名em?，F(xiàn)指的是字符寬度的倍數(shù)，用法類似百分比，如：0.5em, 1em,2em等，通常1em=16px，為了簡化font -size的換算，可以在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?6px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。 

em有如下特點：

 因為“em”就是一個相對值，em的值并不是固定的；

 em會繼續(xù)父級元素的字體大小。

 計算公式：1 ÷ 父元素的字體大小 × 需要轉換的像素值 = em值，這樣的情況下“1.4em”可以            是“14px”,也可以是“20px”，或者說是“24px”。

 rem（root em，根em）：是CSS3新增的一個相對單位，相對的只是HTML根元素，可以只修改根元素就可以成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。兼容性IE9+都可以兼容，對于不兼容的瀏覽器寫一個絕對單位的聲明就可以了。

 3、pt (point，磅)：是一個物理長度單位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

CSS3視口單位vw,wh

vw和vh是視口（viewport units）單位，何謂視口，就是根據(jù)你瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，是不是很神奇，這就代表了，我們不需要顧慮到現(xiàn)在那么多不同電腦有關分辨率的自適應問題。

vw是可視窗口的寬度單位，和百分比有點一樣，1vw = 可視窗口的寬度的百分之一。比如窗口寬度大小是1800px，那么1vw = 18px。和百分比不一樣的是，vw始終相對于可視窗口的寬度，而百分比和其父元素的寬度有關。

vh就是可視窗口的高度了。

他們能夠根據(jù)窗口大小來自動調(diào)節(jié)字體大小，這就能很輕松地完成響應式頁面的布局

利用vw,wh實現(xiàn)在頁面中響應垂直居中，只需要以下代碼

#box { 
  width: 50vw; 
  height: 50vh; 
  margin: 25vh auto; 
}

到此這篇關于網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)的文章就介紹到這了,更多相關網(wǎng)頁尺寸單位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

最新評論