H5移动端开发⼊门知识以及CSS的单位汇总与⽤法
说到css的单位，⼤家应该⾸先想到的是px，也就是像素，我们在⽹页布局中⼀般都是⽤px，但是近年来⾃适应⽹页布局越来越多，em和百分⽐也经常⽤到了。然后随着⼿机的流⾏，web app和hybrid app的开发，都⽤到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做⼀下详细的介绍吧。
1、em
做前端的应该对em不陌⽣，不是什么罕见的单位，是相对单位，
这种技术需要⼀个参考点，⼀般都是以<body>的“font-size”为基准。⽐如说我们使⽤“1em”等于“10px”来改变默认值“1em=16px”，这样⼀来，我们设置字体⼤⼩相当于“14px”时，只需要将其值设置为“1.4em”。前端开发的前辈们总结了⼀个经验
body {
font-size: 62.5%;
手机上可以打html与css的app}
那么，这样之后 1em = 10px 在布局等使⽤的时候好换算了很多。
2、百分⽐
百分⽐相信⼤家更不会陌⽣了，百分⽐⼀般宽泛的讲是相对于⽗元素，但是并不是⼗分准确。
1、对于普通定位元素就是我们理解的⽗元素
2、对于position: absolute；的元素是相对于已定位的⽗元素（offset parent）
3、对于position: fixed；的元素是相对于 ViewPort
viewport：可视窗⼝，也就是浏览器的window那么⼤。
例外情况
1、使⽤了padding、margin 等，实际百分⽐和你想要的百分⽐是有区别的。（关于这个，解决⽅法之⼀，就是我们可以使⽤css3的calc()属性，具体，您请继续往下看，在⽂章最后我会解释。）
2、line-height百分⽐的⼀些情况，通常结果是百分⽐计算后的值。（关于这个，您请继续往下看。。。）
3、rem
rem是相对于根元素<html>的“font-size”为基准。⽐如说我们给html设置font-size为100px，
那么我们要给html中的p标签设置16px的字体，font-size设置.16rem就可以，在这⾥16px=.16rem。
这个单位与em有什么区别呢？
区别在于使⽤rem为元素设定字体⼤⼩时，仍然是相对⼤⼩，但相对的只是HTML根元素。这个单位可谓集相对⼤⼩和绝对⼤⼩的优点于⼀⾝，通过它既可以做到只修改根元素就成⽐例地调整所有字体⼤⼩，⼜可以避免字体⼤⼩逐层复合的连锁反应。⽬前，除了IE8及更早版本外，所有浏览器均已⽀持rem。对于不⽀持它的浏览器，应对⽅法也很简单，就是多写⼀个绝对单位的声明。这些浏览器会忽略⽤rem设定的字体⼤⼩。
rem⽀持IE9及以上，意思是相对于根元素html（⽹页），不会像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**/}
这样整个⽹页都会⽐较统⼀！不会造成混乱！
4、vh 和 vw
IE10＋和现代浏览器都⽀持这两个单位。
vw Viewport宽度， 1vw  等于viewport宽度的1%
vh Viewport⾼度， 1vh  等于viewport⾼的的1%
vw和vh会随着viewport变化⾃动变化，再也不⽤js控制全屏了。
甚⾄有些⼈丧⼼病狂的字体⼤⼩都⽤vw和vh控制，来达到字体和viewport⼤⼩同步的效果。
5、vmin和vmax
IE10+ 和现代浏览器都已经⽀持vmin
webkit浏览器之前不⽀持vmax，新版已经⽀持，所有现代浏览器已经⽀持，但是IE 全部不⽀持vmax
vmin vw和vh中⽐较⼩的值
vmax vw和vh中⽐较⼤的值
这两个属性也会随着viewport变化
6、ch和ex
IE9+ 和现代浏览器都已经⽀持，这两个单位时根据当前font-family  的相对单位。
ch 字符0的宽度
ex ⼩写字符x的⾼度
当font-family改变的时候这两个单位的值也会变化，不同字体表现的样式不⼀样。
第⼆部分移动H5开发⼊门知识：CSS3的新单位算法
A、css3的calc()。
上⾯我们已经提到了calc()，下⾯我们就具体说⼀说吧！
浏览器⽀持IE9+、FF4.0+、Chrome19+、Safari6+
calc()语法⾮常简单，就像我们⼩时候学加（+）、减（-）、乘（*）、除（/）⼀样，使⽤数学表达式来表⽰：
.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的区别吗？
现在就说⼀下⾏⾼带单位和不带单位的区别，例如下⾯的例⼦：
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开发⼊门知识点，对各位的H5前端开发学习有⼀定的帮助.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。