藍(lán)暢首頁(yè) >> 動(dòng)態(tài)
H5開(kāi)發(fā)的基礎(chǔ)知識(shí)，入門(mén)前需要懂得這些
時(shí)間：2019-11-23 23:15:45 | 來(lái)源：
開(kāi)發(fā)一個(gè)好的H5頁(yè)面和CSS密切相關(guān)，說(shuō)到css的單位，大家應(yīng)該首先想到的是px,也就是像素，我們?cè)诰W(wǎng)頁(yè)布局中一般都是用px，但是近年來(lái)自適應(yīng)網(wǎng)頁(yè)布局越來(lái)越多，em和百分比也經(jīng)常用到了。然后隨著手機(jī)的流行，web app和hybrid app的開(kāi)發(fā)，都用到了css3技術(shù)，在css3中，新增了許多單位，rem、vw和vh、vmin和vmax、ch和ex等等，那現(xiàn)在對(duì)這些單位分別做一下詳細(xì)的介紹吧。
1、em
做前端的應(yīng)該對(duì)em不陌生，不是什么罕見(jiàn)的單位，是相對(duì)單位，
這種技術(shù)需要一個(gè)參考點(diǎn)，一般都是以<body>的“font-size”為基準(zhǔn)。比如說(shuō)我們使用“1em”等于“10px”來(lái)改變默認(rèn)值“1em=16px”，這樣一來(lái)，我們?cè)O(shè)置字體大小相當(dāng)于“14px”時(shí)，只需要將其值設(shè)置為“1.4em”。前端開(kāi)發(fā)的前輩們總結(jié)了一個(gè)經(jīng)驗(yàn)
body {font-size: 62.5%;}那么，這樣之后 1em = 10px 在布局等使用的時(shí)候好換算了很多。
2、百分比
百分比相信大家更不會(huì)陌生了，百分比一般寬泛的講是相對(duì)于父元素，但是并不是十分準(zhǔn)確。
1、對(duì)于普通定位元素就是我們理解的父元素
2、對(duì)于position: absolute;的元素是相對(duì)于已定位的父元素（offset parent）
3、對(duì)于position: fixed;的元素是相對(duì)于 ViewPort
viewport：可視窗口，也就是瀏覽器的window那么大。
例外情況
1、使用了padding、margin 等，實(shí)際百分比和你想要的百分比是有區(qū)別的。（關(guān)于這個(gè)，解決方法之一，就是我們可以使用css3的calc()屬性，具體，您請(qǐng)繼續(xù)往下看，在文章最后我會(huì)解釋。）
2、line-height百分比的一些情況，通常結(jié)果是百分比 計(jì)算后的值。
3、rem
rem是相對(duì)于根元素<html>的“font-size”為基準(zhǔn)。比如說(shuō)我們給html設(shè)置font-size為100px，
那么我們要給html中的p標(biāo)簽設(shè)置16px的字體，font-size設(shè)置.16rem就可以，在這里16px=.16rem。
這個(gè)單位與em有什么區(qū)別呢？
區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫(xiě)一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。
rem支持IE9及以上，意思是相對(duì)于根元素html（網(wǎng)頁(yè)），不會(huì)像em那樣，依賴(lài)于父元素的字體大小，而造成混亂。使用起來(lái)安全了很多。
html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/} body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}這樣整個(gè)網(wǎng)頁(yè)都會(huì)比較統(tǒng)一！不會(huì)造成混亂！
4、vh 和 vw
IE10＋ 和現(xiàn)代瀏覽器都支持這兩個(gè)單位。
vw Viewport寬度， 1vw 等于viewport寬度的1%
vh Viewport高度， 1vh 等于viewport高的的1%
vw和vh會(huì)隨著viewport變化自動(dòng)變化，再也不用js控制全屏了。
甚至有些人喪心病狂的字體大小都用vw和vh控制，來(lái)達(dá)到字體和viewport大小同步的效果。
5、vmin和vmax
IE10+ 和現(xiàn)代瀏覽器都已經(jīng)支持vmin
webkit瀏覽器之前不支持vmax，新版已經(jīng)支持，所有現(xiàn)代瀏覽器已經(jīng)支持，但是IE 全部 不支持vmax
vmin vw和vh中比較 小 的值
vmax vw和vh中比較 大 的值
這兩個(gè)屬性也會(huì)隨著viewport變化
6、ch和ex
IE9+ 和現(xiàn)代瀏覽器都已經(jīng)支持,這兩個(gè)單位時(shí)根據(jù) 當(dāng)前font-family 的相對(duì)單位。
ch 字符0的寬度
ex 小寫(xiě)字符x的高度
當(dāng)font-family改變的時(shí)候這兩個(gè)單位的值也會(huì)變化，不同字體表現(xiàn)的樣式不一樣。
第二部分移動(dòng)H5開(kāi)發(fā)入門(mén)知識(shí)：CSS3的新單位算法
A、css3的calc()。
上面我們已經(jīng)提到了calc()，下面我們就具體說(shuō)一說(shuō)吧！
瀏覽器支持IE9+、FF4.0+、Chrome19+、Safari6+
calc()語(yǔ)法非常簡(jiǎn)單，就像我們小時(shí)候?qū)W加 （+）、減（-）、乘（*）、除（/）一樣，使用數(shù)學(xué)表達(dá)式來(lái)表示：
.haorooms { width: calc(expression);}這樣padding和margin和百分比一起用，問(wèn)題就可以解決了。
例如，我們margin是20px。那么我們就可以寫(xiě)成
.haorooms{ width: calc(100% - 20px); //注：減號(hào)前后要有空格，否則很可能不生效！！}也可以這么用：
.box { background: #f60; height: 50px; padding: 10px; border: 5px solid green; width: 90%;/*寫(xiě)給不支持calc()的瀏覽器*/width:-moz-calc(100% - (10px + 5px) * 2); width:-webkit-calc(100% - (10px + 5px) * 2); width: calc(100% - (10px + 5px) * 2);}B、line-height百分比
line-height百分比在面試中可能經(jīng)常問(wèn)到。例如你知道line-height:120%和line-height:1.2的區(qū)別嗎？
現(xiàn)在就說(shuō)一下行高帶單位和不帶單位的區(qū)別，例如下面的例子：
line-height:26px; 表示行高為26個(gè)像素line-heigth:120%;表示行高為當(dāng)前字體大小的120%line-height:2.6em; 表示行高為當(dāng)前字體大小的2.6倍帶單位的行高都有繼承性，其子元素繼承的是計(jì)算值，如父元素的字體大小為14px，定義行高line-height:2em;則計(jì)算值為 28px，不會(huì)因其子元素改變字體尺寸而改變行高。(例如：父元素14px，子元素12px,那么行高就是28px，子元素雖然字體是12，行高還是父元素的行高)
line-height:2.6;表示行高為當(dāng)前字體大小的2.6倍不帶單位的行高是直接繼承，而不是計(jì)算值，如父元素字體尺寸為14px，行高line-height:2;他的行高為28px;子元素尺寸為12px，不需要再定義行高，他默認(rèn)的行高為24px。（例如：子元素12px，他的行高是24,不會(huì)繼承父元素的28）
希望以上的這些移動(dòng)H5開(kāi)發(fā)入門(mén)知識(shí)點(diǎn)，對(duì)各位的H5前端開(kāi)發(fā)學(xué)習(xí)有一定的幫助.
關(guān)于我們：
Infocode藍(lán)暢信息技術(shù)有限公司成功為多家世界財(cái)富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開(kāi)發(fā)供應(yīng)商。
服務(wù)客戶(hù)遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無(wú)錫、廈門(mén)、重慶、西安等大中型城市及地區(qū) 為您提供：H5開(kāi)發(fā)，小程序開(kāi)發(fā)，H5外包，微信開(kāi)發(fā)，H5商城開(kāi)發(fā)，小程序商城開(kāi)發(fā)，網(wǎng)站開(kāi)發(fā)外包，H5游戲開(kāi)發(fā)，小程序開(kāi)發(fā)外包，小程序設(shè)計(jì)、APP開(kāi)發(fā)外包，UI設(shè)計(jì)，SEO優(yōu)化，SEO外包，視頻后期制作等優(yōu)質(zhì)服務(wù)
2022年雙11銷(xiāo)售額數(shù)據(jù):全網(wǎng)交易額為5571億元
2020年天貓雙11銷(xiāo)售額，11.11成交額4982億
網(wǎng)站優(yōu)化公司：網(wǎng)站優(yōu)化的作用
如何實(shí)現(xiàn)SEO關(guān)鍵詞排名提升成為了企業(yè)亟待解決的問(wèn)題
提升網(wǎng)站快速排名的SEO策略，讓你的網(wǎng)站名列前茅
打造高效SEO網(wǎng)站系統(tǒng)，提升您的在線業(yè)務(wù)
網(wǎng)絡(luò)營(yíng)銷(xiāo)公司：網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣專(zhuān)家介紹