H5開發(fā)的基礎知識，入門前需要懂得這些

時間：2019-11-23 23:15:45 | 來源：

開發(fā)一個好的H5頁面和CSS密切相關，說到css的單位，大家應該首先想到的是px,也就是像素，我們在網(wǎng)頁布局中一般都是用px，但是近年來自適應網(wǎng)頁布局越來越多，em和百分比也經常用到了。然后隨著手機的流行，web app和hybrid app的開發(fā)，都用到了css3技術，在css3中，新增了許多單位，rem、vw和vh、vmin和vmax、ch和ex等等，那現(xiàn)在對這些單位分別做一下詳細的介紹吧。

H5開發(fā)

1、em

做前端的應該對em不陌生，不是什么罕見的單位，是相對單位，

這種技術需要一個參考點，一般都是以<body>的“font-size”為基準。比如說我們使用“1em”等于“10px”來改變默認值“1em=16px”，這樣一來，我們設置字體大小相當于“14px”時，只需要將其值設置為“1.4em”。前端開發(fā)的前輩們總結了一個經驗

body {font-size: 62.5%;}

那么，這樣之后 1em = 10px 在布局等使用的時候好換算了很多。

2、百分比

百分比相信大家更不會陌生了，百分比一般寬泛的講是相對于父元素，但是并不是十分準確。

1、對于普通定位元素就是我們理解的父元素

2、對于position: absolute;的元素是相對于已定位的父元素（offset parent）

3、對于position: fixed;的元素是相對于 ViewPort

viewport：可視窗口，也就是瀏覽器的window那么大。

例外情況

1、使用了padding、margin 等，實際百分比和你想要的百分比是有區(qū)別的。（關于這個，解決方法之一，就是我們可以使用css3的calc()屬性，具體，您請繼續(xù)往下看，在文章最后我會解釋。）

2、line-height百分比的一些情況，通常結果是百分比計算后的值。

3、rem

rem是相對于根元素<html>的“font-size”為基準。比如說我們給html設置font-size為100px，

那么我們要給html中的p標簽設置16px的字體，font-size設置.16rem就可以，在這里16px=.16rem。

這個單位與em有什么區(qū)別呢？

區(qū)別在于使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

rem支持IE9及以上，意思是相對于根元素html（網(wǎng)頁），不會像em那樣，依賴于父元素的字體大小，而造成混亂。使用起來安全了很多。

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**/}

這樣整個網(wǎng)頁都會比較統(tǒng)一！不會造成混亂！

4、vh 和 vw

IE10＋和現(xiàn)代瀏覽器都支持這兩個單位。

vw Viewport寬度， 1vw 等于viewport寬度的1%

vh Viewport高度， 1vh 等于viewport高的的1%

vw和vh會隨著viewport變化自動變化，再也不用js控制全屏了。

甚至有些人喪心病狂的字體大小都用vw和vh控制，來達到字體和viewport大小同步的效果。

5、vmin和vmax

IE10+ 和現(xiàn)代瀏覽器都已經支持vmin

webkit瀏覽器之前不支持vmax，新版已經支持，所有現(xiàn)代瀏覽器已經支持，但是IE 全部不支持vmax

vmin vw和vh中比較小的值

vmax vw和vh中比較大的值

這兩個屬性也會隨著viewport變化

6、ch和ex

IE9+ 和現(xiàn)代瀏覽器都已經支持,這兩個單位時根據(jù) 當前font-family 的相對單位。

ch 字符0的寬度

ex 小寫字符x的高度

當font-family改變的時候這兩個單位的值也會變化，不同字體表現(xiàn)的樣式不一樣。

第二部分移動H5開發(fā)入門知識：CSS3的新單位算法

A、css3的calc()。

上面我們已經提到了calc()，下面我們就具體說一說吧！

瀏覽器支持IE9+、FF4.0+、Chrome19+、Safari6+

calc()語法非常簡單，就像我們小時候學加（+）、減（-）、乘（*）、除（/）一樣，使用數(shù)學表達式來表示：

.haorooms {  width: calc(expression);}

這樣padding和margin和百分比一起用，問題就可以解決了。

例如，我們margin是20px。那么我們就可以寫成

.haorooms{  width: calc(100% - 20px);  //注：減號前后要有空格，否則很可能不生效??！}

也可以這么用：

.box {    background: #f60;    height: 50px;    padding: 10px;    border: 5px solid green;     width: 90%;/*寫給不支持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百分比在面試中可能經常問到。例如你知道line-height:120%和line-height:1.2的區(qū)別嗎？

現(xiàn)在就說一下行高帶單位和不帶單位的區(qū)別，例如下面的例子：

line-height:26px; 表示行高為26個像素line-heigth:120%;表示行高為當前字體大小的120%line-height:2.6em; 表示行高為當前字體大小的2.6倍

帶單位的行高都有繼承性，其子元素繼承的是計算值，如父元素的字體大小為14px，定義行高line-height:2em;則計算值為 28px，不會因其子元素改變字體尺寸而改變行高。(例如：父元素14px，子元素12px,那么行高就是28px，子元素雖然字體是12，行高還是父元素的行高)

line-height:2.6;表示行高為當前字體大小的2.6倍

不帶單位的行高是直接繼承，而不是計算值，如父元素字體尺寸為14px，行高line-height:2;他的行高為28px;子元素尺寸為12px，不需要再定義行高，他默認的行高為24px。（例如：子元素12px，他的行高是24,不會繼承父元素的28）

希望以上的這些移動H5開發(fā)入門知識點，對各位的H5前端開發(fā)學習有一定的幫助.

關于我們：

Infocode藍暢信息技術有限公司成功為多家世界財富500強企業(yè)以及其他著名品牌提供優(yōu)質服務，是您靠譜的互聯(lián)網(wǎng)開發(fā)供應商。

服務客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無錫、廈門、重慶、西安等大中型城市及地區(qū) 為您提供：H5開發(fā)，小程序開發(fā)，H5外包，微信開發(fā)，H5商城開發(fā)，小程序商城開發(fā)，網(wǎng)站開發(fā)外包，H5游戲開發(fā)，小程序開發(fā)外包，小程序設計、APP開發(fā)外包，UI設計，SEO優(yōu)化，SEO外包，視頻后期制作等優(yōu)質服務

H5開發(fā),小程序開發(fā)供應商