字体单位px、em、rem、pt

单位：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);

自己用过的总结一下。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！