单位:px,em,rem
对于可以随屏幕大小而自适应的屏幕内容,不用媒体查询,可以通过使用相对单位rem
px:表示pixel,像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。
em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。
rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视(始终想不明白,为什么国人至今对微软都放弃的ie这么恋恋不舍)。
pt:pt表示point,点是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用。
使用rem注意:
在html内规定font-size大小,一般用1rem=10px或1rem=100px;
根据屏幕大小动态定义rem大小:
(function () {
function initFont() {
document.getElementById('viewport').setAttribute('content', 'width=device-width,initial-scale=1,user-scalable=no,width=750,maximum-scale=' + window.screen.width / 750);
document.documentElement.style.fontSize = (document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth) / 7.5 + "px";
}
initFont();
$(window).resize(function() {
initFont();
})
})(window);
自己用过的总结一下。