网页前端开发的一些尺寸单位(px,rem单位)(网页前端开发入门教程)
目錄
- 一、px像素單位
- 二、rem單位
- 三、vw和wh單位
- web前端常用長度單位（px，em，rem，pt）
- CSS3視口單位vw,wh
- 利用vw,wh實現在頁面中響應垂直居中，只需要以下代碼
一、px像素單位
px單位是絕對單位，一般用于pc端網頁開發。因為是絕對單位所以在移動端上的使用體驗并不是很好
舉例：
代碼
<!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>
p {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
pc端
移動端
px單位在pc端都是200px，并沒有隨著屏幕尺寸而變換
二、rem單位
rem它是描述相對于當前根元素字體尺寸，是相對單位。它可以根據根元素的變換而變換，根元素一般指的是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>
p {
width: 5.3333rem;
height: 5.3333rem;
background-color: aqua;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
pc端：
手機端：
rem單位是相對單位所以可以很好的適配手機端
三、vw和wh單位
vw跟wh單位是指相對于視口的寬度視口的寬度或者高度的長度單位。1vw為視口寬度的百分號之一，1vh為視口長度的百分之一。vw跟vh是根據視口尺寸而變化的所以常用于手機端。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>
p {
width: 26.6667vw;
height: 26.6667vw;
background-color: aqua;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
手機端：
這是vw的舉例說明而vh也是如此，盒子的vw單位沒變但是隨著手機屏幕大小發生改變，盒子的大小也發生了改變。
web前端常用長度單位（px，em，rem，pt）
px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸，最初是指字母M的寬度，故名em?，F指的是字符寬度的倍數，用法類似百分比，如：0.5em, 1em,2em等，通常1em=16px，為了簡化font -size的換算，可以在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。
em有如下特點：
因為“em”就是一個相對值，em的值并不是固定的；
em會繼續父級元素的字體大小。
計算公式：1 &pide; 父元素的字體大小 × 需要轉換的像素值 = em值，這樣的情況下“1.4em”可以 是“14px”,也可以是“20px”，或者說是“24px”。
rem（root em，根em）：是CSS3新增的一個相對單位，相對的只是HTML根元素，可以只修改根元素就可以成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。兼容性IE9+都可以兼容，對于不兼容的瀏覽器寫一個絕對單位的聲明就可以了。
3、pt (point，磅)：是一個物理長度單位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸，最初是指字母M的寬度，故名em?，F指的是字符寬度的倍數，用法類似百分比，如：0.5em, 1em,2em等，通常1em=16px，為了簡化font -size的換算，可以在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。
em有如下特點：
因為“em”就是一個相對值，em的值并不是固定的；
em會繼續父級元素的字體大小。
計算公式：1 &pide; 父元素的字體大小 × 需要轉換的像素值 = em值，這樣的情況下“1.4em”可以 是“14px”,也可以是“20px”，或者說是“24px”。
rem（root em，根em）：是CSS3新增的一個相對單位，相對的只是HTML根元素，可以只修改根元素就可以成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。兼容性IE9+都可以兼容，對于不兼容的瀏覽器寫一個絕對單位的聲明就可以了。
3、pt (point，磅)：是一個物理長度單位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
CSS3視口單位vw,wh
vw和vh是視口（viewport units）單位，何謂視口，就是根據你瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，是不是很神奇，這就代表了，我們不需要顧慮到現在那么多不同電腦有關分辨率的自適應問題。
vw是可視窗口的寬度單位，和百分比有點一樣，1vw = 可視窗口的寬度的百分之一。比如窗口寬度大小是1800px，那么1vw = 18px。和百分比不一樣的是，vw始終相對于可視窗口的寬度，而百分比和其父元素的寬度有關。
vh就是可視窗口的高度了。
他們能夠根據窗口大小來自動調節字體大小，這就能很輕松地完成響應式頁面的布局
利用vw,wh實現在頁面中響應垂直居中，只需要以下代碼
#box {
width: 50vw;
height: 50vh;
margin: 25vh auto;
}
到此這篇關于網頁前端開發的一些尺寸單位(px,rem單位)的文章就介紹到這了,更多相關網頁尺寸單位內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
總結
以上是生活随笔為你收集整理的网页前端开发的一些尺寸单位(px,rem单位)(网页前端开发入门教程)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 玩一次卡丁车多少钱？？
- 下一篇： iPhone为什么没有地震预警？苹果手机