網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
我要評(píng)論一、px像素單位
px單位是絕對(duì)單位，一般用于pc端網(wǎng)頁開發(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ì)于視口的寬度視口的寬度或者高度的長度單位。1vw為視口寬度的百分號(hào)之一，1vh為視口長度的百分之一。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的舉例說明而vh也是如此，盒子的vw單位沒變但是隨著手機(jī)屏幕大小發(fā)生改變，盒子的大小也發(fā)生了改變。
web前端常用長度單位（px，em，rem，pt）
px像素（Pixel）。相對(duì)長度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。
em是相對(duì)長度單位。相對(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，為了簡化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有如下特點(diǎn)：
因?yàn)?ldquo;em”就是一個(gè)相對(duì)值，em的值并不是固定的；
em會(huì)繼續(xù)父級(jí)元素的字體大小。
計(jì)算公式：1 ÷ 父元素的字體大小 × 需要轉(zhuǎn)換的像素值 = em值，這樣的情況下“1.4em”可以 是“14px”,也可以是“20px”，或者說是“24px”。
rem（root em，根em）：是CSS3新增的一個(gè)相對(duì)單位，相對(duì)的只是HTML根元素，可以只修改根元素就可以成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。兼容性IE9+都可以兼容，對(duì)于不兼容的瀏覽器寫一個(gè)絕對(duì)單位的聲明就可以了。
3、pt (point，磅)：是一個(gè)物理長度單位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
px像素（Pixel）。相對(duì)長度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。
em是相對(duì)長度單位。相對(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，為了簡化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有如下特點(diǎn)：
因?yàn)?ldquo;em”就是一個(gè)相對(duì)值，em的值并不是固定的；
em會(huì)繼續(xù)父級(jí)元素的字體大小。
計(jì)算公式：1 ÷ 父元素的字體大小 × 需要轉(zhuǎn)換的像素值 = em值，這樣的情況下“1.4em”可以 是“14px”,也可以是“20px”，或者說是“24px”。
rem（root em，根em）：是CSS3新增的一個(gè)相對(duì)單位，相對(duì)的只是HTML根元素，可以只修改根元素就可以成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。兼容性IE9+都可以兼容，對(duì)于不兼容的瀏覽器寫一個(gè)絕對(duì)單位的聲明就可以了。
3、pt (point，磅)：是一個(gè)物理長度單位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
CSS3視口單位vw,wh
vw和vh是視口（viewport units）單位，何謂視口，就是根據(jù)你瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，是不是很神奇，這就代表了，我們不需要顧慮到現(xiàn)在那么多不同電腦有關(guān)分辨率的自適應(yīng)問題。
vw是可視窗口的寬度單位，和百分比有點(diǎn)一樣，1vw = 可視窗口的寬度的百分之一。比如窗口寬度大小是1800px，那么1vw = 18px。和百分比不一樣的是，vw始終相對(duì)于可視窗口的寬度，而百分比和其父元素的寬度有關(guān)。
vh就是可視窗口的高度了。
他們能夠根據(jù)窗口大小來自動(dòng)調(diào)節(jié)字體大小，這就能很輕松地完成響應(yīng)式頁面的布局
利用vw,wh實(shí)現(xiàn)在頁面中響應(yīng)垂直居中，只需要以下代碼
#box {
width: 50vw;
height: 50vh;
margin: 25vh auto;
}到此這篇關(guān)于網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)的文章就介紹到這了,更多相關(guān)網(wǎng)頁尺寸單位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國外的一些網(wǎng)站)
今天的文章，我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站，這些網(wǎng)站上提供了很多編程教程，圖書以及編程練習(xí)，希望對(duì)你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長度單位主要包括px,pt，em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對(duì)單位，一般用于pc端網(wǎng)頁開發(fā),因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好,rem它是描述相對(duì)于當(dāng)前根元素字體尺寸，是相對(duì)單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮，各有優(yōu)點(diǎn)，選擇適合的壓縮工具為將來做項(xiàng)目開發(fā)使用是一件很重要的事情??！在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21- 瀏覽器是多進(jìn)程的，有瀏覽器主進(jìn)程，網(wǎng)絡(luò)進(jìn)程，渲染進(jìn)程，插件進(jìn)程等，在將html，css，javascript解析成一個(gè)頁面的時(shí)候，就需要多個(gè)進(jìn)程的分工合作2023-05-01
- 本文為大家整理了常用的文件對(duì)應(yīng)的MIME類型，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁中使用Unicode字符的介紹(&#,\u等)
國際組織制定了可以容納世界上所有文字和符號(hào)的字符編碼方案，稱為Unicode，是通用字符集Universal Character Set的縮寫，用以滿足跨語言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-12-02
告別硬編碼讓你的前端表格自動(dòng)計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動(dòng)計(jì)算,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-27
