整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
hoto by Charles Deluvio on Unsplash
我決定寫這個博客的目的是希望探索更多有關(guān)使用CSS調(diào)整大小的方法。 有這么多種可能性，很容易感到不知所措和困惑。 瀏覽器當(dāng)前支持16種度量單位：像素，英寸，皮卡，厘米，毫米，點，百分比，em，rem，視口尺寸（vw，vh），ex，ch，Vmax（最大視口）和vmin （viewportmin）在這16個單位中有兩類：相對長度和絕對長度。
首先要了解相對長度，它們會在其他物體上獲得尺寸，這些尺寸在您要設(shè)定尺寸的元素之外或相對于它們，例如，父級的尺寸，字體大小和視口尺寸。
百分比基于其父元素。 因此，如果一個元素為200px * 200px，并且該元素的子元素的寬度為50％，高度為50％，則該子元素的等效尺寸為100px * 100px，因為200px的50％為100px。
在這里，我們有一個名為" parent-box"的div元素和一個名為" child-box"的子div元素。
在css文件中，我將父盒的高度和寬度設(shè)置為200px，子盒的寬度和高度設(shè)置為50％，這意味著現(xiàn)在子盒將是父盒尺寸的50％，因此 如果父框為200px * 200px，則表示子框為100px * 100px，結(jié)果如下：
如您所見，藍(lán)色元素（即子元素）正好是粉紅色框（即父元素）的50％。
當(dāng)前有四種類型的視口尺寸單位，vw（視口寬度），vh（視口高度），vmin（視口最小）和vmax（視口最大）。 使用這些單位時要知道的第一件事是，它們會自動將瀏覽器的屏幕劃分為100 x 100的不可見網(wǎng)格，網(wǎng)格中的每個正方形或單位將根據(jù)情況代表一個vw，vh，vmin或vmax。
因此，讓我們更深入地研究這兩個。 如果我們聲明一個元素的寬度為50vw且高度為50vh，我們將看到該元素將恰好占據(jù)頁面高度的一半，并且占據(jù)頁面寬度的一半，每個vw或vh現(xiàn)在相當(dāng)于那個不可見的100 *中的一個單元 100，所以如果我們聲明一個元素為50vw，它將是瀏覽器寬度的一半，下面我們來看一個示例。
在這里，我們看到父元素恰好是瀏覽器高度和寬度的一半。
這些單位比較棘手。 因此，這些單元的工作方式是將使用高度或?qū)挾鹊淖畲蠡蜃钚￠L度。 例如，讓我們聲明父框的寬度為50vmax，如果瀏覽器的寬度為800px，高度為500px，則父框的寬度為400px，因為寬度大于高度，所以 元素將從瀏覽器的水平部分的不可見網(wǎng)格中獲取50個單位，現(xiàn)在，如果高度為1000px，寬度為500px，則父框的寬度現(xiàn)在為500px，因為瀏覽器的高度現(xiàn)在大于寬度，因此父元素 box將占據(jù)瀏覽器垂直邊100平方中的50平方，并使用它來聲明父對象的框?qū)挕?/p>
現(xiàn)在進(jìn)入vmin。 假設(shè)我們聲明父級框的寬度為50vmin，那么從最小視口尺寸開始，父級框的寬度將占據(jù)50個網(wǎng)格單位。 同樣的示例，如果瀏覽器的寬度為800px，高度為500px，則父框的寬度現(xiàn)在將為250px，因為我們聲明父框的寬度為最小視口尺寸的50個單位， 在這種情況下，是高度。 現(xiàn)在，如果高度為1000像素，寬度為600像素，則父框的寬度現(xiàn)在為300像素，我知道這非常令人困惑，因此讓我們回到第一個示例：
Here we declare the width to be 50vmax (50 units out of 100 from the BIGGEST viewport dimension)
這樣看起來像這樣：
我們可以看到父框現(xiàn)在恰好是瀏覽器寬度長度的一半，這是因為瀏覽器的寬度大于高度。 現(xiàn)在，如果我們改變一切，將會得到不同的結(jié)果。
Here we declare the width to be 50vmin (50 units out of 100 from the SMALLEST viewport dimension)
所以看起來像這樣：
我們可以看到父框現(xiàn)在恰好是瀏覽器高度的一半，這是因為瀏覽器的高度小于寬度。
我從未使用過這些單元，但讓我們看看它們是如何工作的。 所以首先讓我們從ex開始。 這個單位測量您正在使用的任何字體系列的字母" X"的高度，這是指字母" X"的高度？ 因此，如果此" X"的高度為10px（字面的字母為" X"），則1ex將為10px，假設(shè)您使用的是另一個字體系列中的" X"，其中" X"的高度為9px，所以現(xiàn)在1ex 是9px。
ch的行為方式非常相似，不同之處在于1ch的長度將基于字體家族的字母" O"的寬度，因此，如果字母" O"的寬度為5px，則1ch將等于5px 。
此單位響應(yīng)父元素的字體大小，因此，如果父元素的字體大小為10px，則每個em現(xiàn)在等于10 px。
在這里，我們在父框內(nèi)聲明一個10px字體大小，并將子元素的寬度和高度設(shè)置為5em，因此，如果父元素的字體大小為10px，則意味著每個em值10px，因此我們的子元素將為50px * 50像素
em的作用是它們級聯(lián)，這意味著什么？ 因此，如果子元素內(nèi)有另一個元素，并且將其尺寸設(shè)置為5em，則第二個子元素將為100px * 100px
發(fā)生這種情況的原因是，當(dāng)一個孩子中有另一個元素時，第二個孩子會將值乘以2，瘋狂嗎？ 這就是為什么在使用em時我們必須小心。
現(xiàn)在，rem與em有所不同，因為rem基于根字體大小而不是父字體來確定其尺寸。 rem一詞的意思是" root em"，這解決了我們在em元素級聯(lián)時遇到的問題，通過基于root取其維度，rem值在整個文件中都相同。 因此，讓我們看一下相同的示例，但帶有rem。
因此，如果將本示例與上面的示例進(jìn)行比較，我們可以看到父框的字體大小現(xiàn)在為30，但是第一個和第二個子控件的字體大小較小，我們還可以看到元素沒有級聯(lián)， 是因為以10px的字體大小聲明了根，所以無論何時我們現(xiàn)在使用rem，它都將始終引用10px。
絕對長度不會根據(jù)其他因素或頁面，父級，視口等其他因素來決定其大小。
因此，我覺得關(guān)于這些度量單位的解釋很多。 如果您將某物聲明為1in，則無論屏幕大小如何，該值都將為1in。 厘米和毫米也一樣
因此，points和picas是印刷術(shù)語。 point是1/72英寸，因此很小，12點活字就是12點或1/6英寸。
最后但并非最不重要…
現(xiàn)在，像素是絕對長度，但是它們的大小可能取決于您所使用的設(shè)備，某些設(shè)備的像素比其他設(shè)備大，這取決于它們的密度和分辨率。
(本文翻譯自Sebastian Delima的文章《CSS: Units Of Measurement (px, em, rem, vw, %, etc.)》，參考：https://medium.com/swlh/css-units-of-measurement-px-em-rem-vw-etc-ed8522620775)
家好，很高興又見面了，我是"高級前端進(jìn)階"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點贊、收藏、轉(zhuǎn)發(fā)!
ai2html 是 Adob?e Illustrator 的開源腳本，可將 Illustrator 文檔轉(zhuǎn)換為 html 和 css，基于 ai2html 的諸多示例登上了 New York Times。
ai2html由不同的組成部分：
目前 ai2html 在 Github 上開源，是一個值得關(guān)注的 AI 類前端開源項目。
很多人會有此疑問，為什么不直接將 Illustrator 文件導(dǎo)出為圖像或 SVG？
圖像和 SVG 中的文本會隨著圖像的縮放而縮放，因此當(dāng)藝術(shù)品縮小時，文本很快就會變得難以辨認(rèn)，或者在放大時看起來非常大。
通過將文本渲染為 html，可以上下縮放“圖形”同時保持文本在相同的字體大小和行高下可讀，從而適應(yīng)從手機(jī)到巨型桌面顯示器的視口。
可以打開鏈接 http://nyti.ms/1CQdkwq ，然后查看頁面時更改窗口大小，此時將看到圖稿比例變化，但文本保持相同大小。 更多示例可以查看 https://del.icio.us/archietse/ai2html+responsive
同時，當(dāng) Illustrator 保存 SVG 時，每一行文本都會被分解為單獨的 SVG 元素，這使得編輯文本變得非常困難。 通過以 HTML 形式渲染文本，編輯人員可以更輕松地進(jìn)入 CMS 并進(jìn)行編輯，而無需費力地瀏覽一堆 SVG 代碼。
當(dāng)然，ai2html 也有一定的局限性，主要體現(xiàn)在以下幾點：
將 ai2html 的 CDN 文件下載保存到電腦，下載地址已經(jīng)在文末給出。
將 ai2html.js 文件移動到腳本所在的 Illustrator 文件夾中。 例如，在運行 Adobe Illustrator CC 2015 的 Mac 上，路徑為：
/Applications/Adobe Illustrator CC 2015/Presets/en_US/Scripts/ai2html.js接著按照以下步驟使用 ai2html：
http://ai2html.org/
https://github.com/newsdev/ai2html
https://raw.githubusercontent.com/newsdev/ai2html/master/ai2html.js
端開發(fā)過程中，尺寸單位是我們必須用到的，下面我們對css中常見的幾種尺寸單位px,em,rem,rpx進(jìn)行逐一介紹
在這之前，需要先對幾個概念進(jìn)行普及介紹
基本概念
（以下概念讀起來可能有些晦澀，如果看不懂也沒關(guān)系）
像素
它不是自然界的物理長度，指基本原色素及其灰度的基本編碼。
css中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。
在為桌面瀏覽器設(shè)計的網(wǎng)頁中，我們無需對這個津津計較，但在移動設(shè)備上，必須弄明白這點。
在早先的移動設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。
后來隨著技術(shù)的發(fā)展，移動設(shè)備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設(shè)備也是這個道理。
物理像素
它是顯示器（電腦、手機(jī)屏幕）最小的物理顯示單位，物理像素指的是顯示器上最小的點。物理像素的大小取決于屏幕。是一個無法改變的屬性。
設(shè)備獨立像素
我上一張圖，你就會理解什么是設(shè)備獨立像素
就是我們開發(fā)過程中使用的css中的px
設(shè)備像素比（device pixel radio）
設(shè)備像素比=物理像素 / 設(shè)備獨立像素，單位是dpr！（device pixel radio）
Retina屏幕
所謂“Retina”是一種顯示標(biāo)準(zhǔn)，是把更多的像素點壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度。也被稱為視網(wǎng)膜顯示屏 ——百度百科
因為Retina屏幕的出現(xiàn)，在pc端默認(rèn)情況下，css中的1px等于1物理像素，但在移動端1px不一定等于1物理像素，比如說iPhone的設(shè)備獨立像素是375 667，因為它使用了Retina屏幕，他的dpr是2，所以iPhone 6 的物理像素為 750 1334
在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1px所對應(yīng)的物理像素個數(shù)是不一致的。
在普通屏幕下，1px 對應(yīng) 1個物理像素(1:1)。 在Retina屏幕下（dpr=2），1px對應(yīng) 2x2個物理像素(1:4)。
你會發(fā)現(xiàn)，在移動端開發(fā)中使用了圖片（img標(biāo)簽），2倍圖要比1倍圖清晰，就是這個緣故
px
默認(rèn)情況下像素px是相對于屏幕分辨率而言，比如說我們的屏幕分辨率是1440 X 900，說的就是像素1440px X 900px；
這里會遇到另一種情況
### 瀏覽器縮放
縮放是縮放CSS像素(縮放比例為1時,一個CSS像素等于一個屏幕像素)，就是在屏幕分辨率不變的情況下，用戶對瀏覽進(jìn)行了縮放
強(qiáng)調(diào)一點，用戶的縮放行為是對瀏覽器進(jìn)行的，縮放的是css像素，而非分辨率，分辨率是屏幕的分辨率，不論你怎么縮放當(dāng)前頁面，屏幕分辨率都不會改變
我們知道在移動端可以在一定程度上控制用戶的縮放行為，也可以禁止用戶縮放
<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進(jìn)行簡單介紹
em 是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。
看個栗子吧
<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；
當(dāng)我們?nèi)∠谌塮ont-size后，第三級的字體大小為40px；
所以我們說em的字體大小不是固定的，em的大小取決于父級的字體大小
當(dāng)父級的字體大小為20px，子級的1em就是20px
當(dāng)父級的字體大小為30px，子級的1em就是30px
那么說font-size存在著繼承父級的特點
我們在第一級html中設(shè)置font-size，第二級繼承第一級，第三級繼承第二級，第四級繼承第三級，以此類推
每一級都繼承自它的父級，也就是說每一級的em所代表的px大小都不是固定的，因為他們的父級不是同一個，所以em的應(yīng)用場景并不多。
那么如果是em的都繼承自同一個地方，是不是可以解決很多問題呢？
這時候rem出現(xiàn)了
rem
rem 是CSS3的一個相對單位（root em，根em）
使用rem為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是HTML根元素
只要html的font-size大小不變，1rem所代表的font-size大小就不會變，rem只取決于html的font-size
rem解決了哪些問題
移動設(shè)備的寬度是各種各樣的，每個設(shè)備的dpr也不同，換句話說就是不同設(shè)備每一行的物理像素數(shù)不同，能顯示的css的px數(shù)也不同，
如果我們寫一個div，寬度是375px，375px在這個屏幕（iPhone6）上是剛剛滿屏，因為這個屏幕寬度剛剛是375px( 設(shè)備獨立像素)，
當(dāng)我們換另一個寬度是414px的設(shè)備（iPhone6Plus）時，這個寬度375px的div就無法鋪滿這個屏幕，同樣的當(dāng)換一個iPhone5（320px），又會出現(xiàn)滾動條，安卓機(jī)的寬度更是五花八門，使用media媒體查詢不靠譜，因為它不能覆蓋所有的機(jī)型寬度
我們之前說rem的大小是相對于html的font-size的，如果html的font-size根據(jù)不同設(shè)備的寬度做動態(tài)計算，問題就會得到解決
我們寫頁面都是根據(jù)UI設(shè)計稿來做的，我們假設(shè)UI設(shè)計稿的寬度是750px（750px是常規(guī)寬度，當(dāng)然也可以是640px或是其他寬度，但是整個項目，寬度必須統(tǒng)一），唯一不變就是就屏幕寬度，我們的html的font-size（rem）只取決于設(shè)備寬度
于是
document.documentElement.style.fontSize=100 * ( document.documentElement.clientWidth / 750) + 'px'
html的font-size：document.documentElement.style.fontSize
設(shè)備的寬度：document.documentElement.clientWidth
750：UI設(shè)計稿的寬度
為了方便計算我們將font-size x 100，方便計算（乘100不是必須的，我接觸過一些項目就不是乘以100，但是UI設(shè)計稿中使用了sketch做了動態(tài)計算，但我還是建議乘100，不然遇到psd的設(shè)計圖就很麻煩了）
對上面的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的設(shè)計稿上量了多少px，就寫多少rpx就行了，完美適配，perfect！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
