css中的各种单位简述以及ios10下safari禁止缩放的问题
px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，css3新加属性，chrome/firefox/IE9+支持。
(另外需注意chrome强制最小字体为12px，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。
html{font-size: 62.5%} /* 16px * 62.5% = 10px */
body{font-size: 1.4rem;} /* 1.4rem * 12px = 16.8px */本意设置body的字体大小为14px，可是在chrom中实际上却是16.8px，就是因为10px小于12px，所以采取了12px。
rem与em的区别：
rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小
em最多取到小数点的后三位
<style>
html{ font-size: 20px; }
body{
font-size: 1.4rem; /* 1rem = 28px */
padding: 0.7rem; /* 0.7rem = 14px */
}
div{
padding: 1em; /* 1em = 28px */
}
span{
font-size:1rem; /* 1rem = 20px */
padding: 0.9em; /* 1em = 18px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>在上面的代码中，我们将根元素（html）的字体大小font-size设为20px，body的字体大小设为1.4rem，那么转换为像素就是28px（20 × 1.4），接着我们又将div的padding设为1em，由于其基于父元素，所以转换为像素是28px ( 28 × 1），然后我们又将span的字体大小设为1rem，也就是20px，由于其自身设置了字体大小，所以padding设为1em，转换为像素是20px(20 × 1），而不是乘以其父元素的字体大小28px(28 × 1）。
注意：当元素自身设置了字体大小，那么如果它的其他css属性也使用em单位，则会基于它自身的字体大小。（就像上面例子的span的padding一样）
注：rem与em多在移动端中使用，一般需设置meta缩放比1:1
< meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
但在IOS10 safari 下官方规定了不能禁止用户缩放，就是说上述标签是无效的。
暂未找到正确的解决之道，本人采用监听事件来阻止默认行为，有一定作用，但并不能完全解决。
window.onload = function () {
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
document.addEventListener('dblclick', function (e) {
e.preventDefault();
});
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
};vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。假如浏览器的高度为500px，那么1vh就等于5px（500px/100）。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持
其它的单位还有：
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大约1/72寸
pc:pica，大约6pt，1/6寸
ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)
ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safari7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)
- 上一篇 »各种JavaScript对象与数组
- 下一篇 »Linux文件io--one简述