整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
端開發(fā)過程中，尺寸單位是我們必須用到的，下面我們對css中常見的幾種尺寸單位px,em,rem,rpx進行逐一介紹
在這之前，需要先對幾個概念進行普及介紹
基本概念
（以下概念讀起來可能有些晦澀，如果看不懂也沒關系）
像素
它不是自然界的物理長度，指基本原色素及其灰度的基本編碼。
css中的像素只是一個抽象的單位，在不同的設備或不同的環(huán)境中，css中的1px所代表的設備物理像素是不同的。
在為桌面瀏覽器設計的網(wǎng)頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。
在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。
后來隨著技術(shù)的發(fā)展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。
物理像素
它是顯示器（電腦、手機屏幕）最小的物理顯示單位，物理像素指的是顯示器上最小的點。物理像素的大小取決于屏幕。是一個無法改變的屬性。
設備獨立像素
我上一張圖，你就會理解什么是設備獨立像素
就是我們開發(fā)過程中使用的css中的px
設備像素比（device pixel radio）
設備像素比 = 物理像素 / 設備獨立像素，單位是dpr！（device pixel radio）
Retina屏幕
所謂“Retina”是一種顯示標準，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度。也被稱為視網(wǎng)膜顯示屏 ——百度百科
因為Retina屏幕的出現(xiàn)，在pc端默認情況下，css中的1px等于1物理像素，但在移動端1px不一定等于1物理像素，比如說iPhone的設備獨立像素是375 667，因為它使用了Retina屏幕，他的dpr是2，所以iPhone 6 的物理像素為 750 1334
在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1px所對應的物理像素個數(shù)是不一致的。
在普通屏幕下，1px 對應 1個物理像素(1:1)。 在Retina屏幕下（dpr=2），1px對應 2x2個物理像素(1:4)。
你會發(fā)現(xiàn)，在移動端開發(fā)中使用了圖片（img標簽），2倍圖要比1倍圖清晰，就是這個緣故
px
默認情況下像素px是相對于屏幕分辨率而言，比如說我們的屏幕分辨率是1440 X 900，說的就是像素1440px X 900px；
這里會遇到另一種情況
### 瀏覽器縮放
縮放是縮放CSS像素(縮放比例為1時,一個CSS像素等于一個屏幕像素)，就是在屏幕分辨率不變的情況下，用戶對瀏覽進行了縮放
強調(diào)一點，用戶的縮放行為是對瀏覽器進行的，縮放的是css像素，而非分辨率，分辨率是屏幕的分辨率，不論你怎么縮放當前頁面，屏幕分辨率都不會改變
我們知道在移動端可以在一定程度上控制用戶的縮放行為，也可以禁止用戶縮放
<meta name="viewport" content="width=device-width,initial-scale=1.0">
content屬性值 :
但是在pc端就麻煩了
windows：
mac：
由于瀏覽器菜單欄屬于系統(tǒng)軟件權(quán)限，沒發(fā)控制，我們可以通過js控制ctrl/cammond + +/- 或 Windows下ctrl + 滾輪 縮放頁面的情況
em
本人在實際開發(fā)過程中并沒有使用過em單位，但是后面要說的rem是基于em的，所以，對em進行簡單介紹
em 是相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。
看個栗子吧
<body>
<style>
html {
font-size: 50px;
}
.my-div {
width: 100%;
height: 500px;
margin-top: 50px;
background-color: gray;
font-size: 40px;
}
.my-div .parent-font {
font-size: 30px;
}
.my-div .parent-font .child-font {
font-size: 0.5em;
}
</style>
<div class="my-div">
<p class="parent-font">
我是父級文字
<span class="child-font">我是子級文字</span>
</p>
</div>
</body>
html代碼中，
第一級，html的 font-size: 50px;
第二級，my-div 的 font-size: 40px;
第三級，parent-font 的 font-size:30px;
第四級，child-font 的 font-size: 0.5em;
我們通過瀏覽器查看，發(fā)現(xiàn)第四級的fong-size為15px；
我們?nèi)∠谌塸arent-font 的字體大小
我們通過瀏覽器查看，發(fā)現(xiàn)第四級的fong-size為20px；
當我們?nèi)∠谌塮ont-size后，第三級的字體大小為40px；
所以我們說em的字體大小不是固定的，em的大小取決于父級的字體大小
當父級的字體大小為20px，子級的1em就是20px
當父級的字體大小為30px，子級的1em就是30px
那么說font-size存在著繼承父級的特點
我們在第一級html中設置font-size，第二級繼承第一級，第三級繼承第二級，第四級繼承第三級，以此類推
每一級都繼承自它的父級，也就是說每一級的em所代表的px大小都不是固定的，因為他們的父級不是同一個，所以em的應用場景并不多。
那么如果是em的都繼承自同一個地方，是不是可以解決很多問題呢？
這時候rem出現(xiàn)了
rem
rem 是CSS3的一個相對單位（root em，根em）
使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素
只要html的font-size大小不變，1rem所代表的font-size大小就不會變，rem只取決于html的font-size
rem解決了哪些問題
移動設備的寬度是各種各樣的，每個設備的dpr也不同，換句話說就是不同設備每一行的物理像素數(shù)不同，能顯示的css的px數(shù)也不同，
如果我們寫一個div，寬度是375px，375px在這個屏幕（iPhone6）上是剛剛滿屏，因為這個屏幕寬度剛剛是375px( 設備獨立像素)，
當我們換另一個寬度是414px的設備（iPhone6Plus）時，這個寬度375px的div就無法鋪滿這個屏幕，同樣的當換一個iPhone5（320px），又會出現(xiàn)滾動條，安卓機的寬度更是五花八門，使用media媒體查詢不靠譜，因為它不能覆蓋所有的機型寬度
我們之前說rem的大小是相對于html的font-size的，如果html的font-size根據(jù)不同設備的寬度做動態(tài)計算，問題就會得到解決
我們寫頁面都是根據(jù)UI設計稿來做的，我們假設UI設計稿的寬度是750px（750px是常規(guī)寬度，當然也可以是640px或是其他寬度，但是整個項目，寬度必須統(tǒng)一），唯一不變就是就屏幕寬度，我們的html的font-size（rem）只取決于設備寬度
于是
document.documentElement.style.fontSize = 100 * ( document.documentElement.clientWidth / 750) + 'px'
html的font-size：document.documentElement.style.fontSize
設備的寬度：document.documentElement.clientWidth
750：UI設計稿的寬度
為了方便計算我們將font-size x 100，方便計算（乘100不是必須的，我接觸過一些項目就不是乘以100，但是UI設計稿中使用了sketch做了動態(tài)計算，但我還是建議乘100，不然遇到psd的設計圖就很麻煩了）
對上面的js做些完善
const fontFun = function () {
let docEl = document.documentElement
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
const recalc = function () {
let clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
}
if (!document.addEventListener) return
window.addEventListener(resizeEvt, recalc, false)
window.addEventListener('pageshow', recalc, false)
document.addEventListener('DOMContentLoaded', recalc, false)
}
export {
fontFun
}
對以上代碼不做過多解釋
也可以這樣寫
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
win.addEventListener('pageshow', recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
iPhone5(320px)下html的font-size:42.6667px,1rem=42.6667px
iPhone6(375px)下html的font-size:50px,1rem=50px
iPhone6Plus(414px)下html的font-size:55.2px,1rem=55.2px
rem是繼承自html的font-size，但是小程序中沒有html，那怎么辦呢？
rpx
我不基于html的font-size了，我基于一個別的值就行了，你也不需要計算這個值，我給你計算了，這就是rpx。
最終的效果就是，你開發(fā)時在iphon6的設計稿上量了多少px，就寫多少rpx就行了，完美適配，perfect！
例
Norwegian Mountain Trip
在線實例
插入圖像
本例演示如何在網(wǎng)頁中顯示圖像。
從不同的位置插入圖片
本例演示如何將其他文件夾或服務器的圖片顯示到網(wǎng)頁中。
（可以在本頁底端找到更多實例。）
HTML 圖像- 圖像標簽（ <img>）和源屬性（Src）
在 HTML 中，圖像由<img> 標簽定義。
<img> 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
<img src="url" alt="some_text">
URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中，那么其 URL 為 http://www.w3school.com.cn/images/boat.gif。
瀏覽器將圖像顯示在文檔中圖像標簽出現(xiàn)的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。
HTML 圖像- Alt屬性
alt 屬性用來為圖像定義一串預備的可替換的文本。
替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
HTML 圖像- 設置圖像的高度與寬度
height（高度） 與 width（寬度）屬性用于設置圖像的高度與寬度。
屬性值默認單位為像素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
提示: 指定圖像的高度和寬度的一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。
基本的注意事項 - 有用的提示：
注意: 假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。
注意: 加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設置圖像的位置，瀏覽器無法加載圖片，圖像標簽就會顯示一個破碎的圖片。
更多實例
排列圖片
本例演示如何在文字中排列圖像。
浮動圖像
本例演示如何使圖片浮動至段落的左邊或右邊。
設置圖像鏈接
本例演示如何將圖像作為一個鏈接使用。
創(chuàng)建圖像映射
本例顯示如何創(chuàng)建帶有可供點擊區(qū)域的圖像地圖。其中的每個區(qū)域都是一個超級鏈接。
HTML 圖像標簽
| 標簽 | 描述 |
|---|---|
| <img> | 定義圖像 |
| <map> | 定義圖像地圖 |
| <area> | 定義圖像地圖中的可點擊區(qū)域 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標簽，要想在網(wǎng)頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽<img />以及和它相關的屬性。圖像標簽的基本語法格式如下。
<img src="圖像URL" />在上面的語法中，src屬性用于指定圖像文件的路徑和文件名，是img標簽的必需屬性。
要想在網(wǎng)頁中靈活地使用圖像，僅僅依靠src屬性是遠遠不夠的。為此HTML還為<img />標簽準備了其他的屬性，具體如表2-5所示。
表1 <img />標簽的屬性
表1對<img />標簽的常用屬性做了簡要的描述，下面對它們進行詳細講解，具體如下：
1.圖像的替換文本屬性alt
有時頁面中的圖像可能無法正常顯示，如圖片加載錯誤，瀏覽器版本過低等。因此為頁面上的圖像添加替換文本是個很好的習慣，在圖像無法顯示時告訴用戶該圖片的信息，這就需要使用圖像的alt屬性。
2.圖像的寬度和高度屬性 width、height
通常情況下，如果不給<img />標簽設置寬高屬性，圖片就會按照它的原始尺寸顯示，此外，也可以通過width和height屬性用來定義圖片的寬度和高度。通常我們只設置其中的一個屬性，另一個屬性則會依據(jù)前一個設置的屬性將原圖等比例顯示。如果同時設置兩個屬性，且其比例和原圖大小的比例不一致，顯示的圖像就會變形或失真。
3.圖像的表框?qū)傩?border
默認情況下圖像是沒有邊框的，通過border屬性可以為圖像添加邊框、設置邊框的寬度，
4.圖像的邊距屬性 vspace、hspace
在網(wǎng)頁中，由于排版需要，有時候還需要調(diào)整圖像的邊距。HTML中通過vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。
5.圖像的對齊屬性align
圖文混排是網(wǎng)頁中很常見的效果，默認情況下圖像的底部會與文本的第一行文字對齊，如圖1所示。
圖 1 圖像標簽的默認對齊效果
但是在制作網(wǎng)頁時需要經(jīng)常實現(xiàn)圖像和文字環(huán)繞效果，例如左圖右文，這就需要使用圖像的對齊屬性align。
注意：
1、實際制作中并不建議圖像標簽<img />直接使用border、vspace、hspace及align屬性，可用CSS樣式替代。
2、網(wǎng)頁制作中，裝飾性的圖像不建議直接插入<img />標簽，最好通過CSS設置背景圖像來實現(xiàn)。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
