欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

 一、px像素單位

px單位是絕對(duì)單位，一般用于pc端網(wǎng)頁(yè)開發(fā)。因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好

舉例：

代碼

<!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端

 移動(dòng)端

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

二、rem單位

rem它是描述相對(duì)于當(dāng)前根元素字體尺寸，是相對(duì)單位。它可以根據(jù)根元素的變換而變換，根元素一般指的是html的font-size，默認(rèn)值是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端：

手機(jī)端：

 rem單位是相對(duì)單位所以可以很好的適配手機(jī)端

三、vw和wh單位

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

舉例：

代碼

<!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>

手機(jī)端：

 

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

web前端常用長(zhǎng)度單位（px，em，rem，pt）

px像素（Pixel）。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。

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

em有如下特點(diǎn)：

 因?yàn)?ldquo;em”就是一個(gè)相對(duì)值，em的值并不是固定的；

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

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

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

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

 px像素（Pixel）。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。

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

em有如下特點(diǎn)：

 因?yàn)?ldquo;em”就是一個(gè)相對(duì)值，em的值并不是固定的；

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

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

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

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

CSS3視口單位vw,wh

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

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

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

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

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

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

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

相關(guān)文章

最新評(píng)論