像素2（web中css的rem适配）

2020-10-26 03:01:09 阅读：256 来源： 互联网

常见适配的解决方案，
在微信小程序中引入了rpx这个单位，
在Android用的是dp，在ccs中用的rem，
在苹果中用的pt这个单位，苹果是以iPhone6 *

px、em、rem关系：

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。
相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
为了简化font-size的换算，
需要在css中的body选择器中声明Font-size=62.5%，
这就使em值变为 16px*62.5%=10px,
 这样12px=1.2em, 10px=1em, 
也就是说只需要将你的原来的px数值除以10，
然后换上em作为单位就行了。

rem是CSS3新增的一个相对单位（root em，根em）
这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，
但相对的只是HTML根元素。
通过它既可以做到只修改根元素就成比例地调整所有字体大小，
又可以避免字体大小逐层复合的连锁反应。

简单来说将所有单位都以rem来表示，然后控制根元素的字体大小就行。

那么这基准字体大小设置多少合适呢

因为一般设计稿都是以多少px作为标准，那么最好基准就是px整十倍，以便换算，比如10px，那么0.1rem就是1px。

不直接使用html{font-size:10px;}
据说因为浏览器字体（PC）最小就是12px，
所有应该设置为：
html{font-size:62.5%;}
（原理：浏览器默认字体大小(16px)那么16px*62.5%=10px）

通过js动态调整基准字体大小（关键参数是设计稿的基准大小，初始字体大小）

/* 自执行函数 */
(function(){  
    change();  
    function change(){     
         /*设置以屏幕320px位基准此时的字体大小为100px,
        那么浏览器窗口大小改变的时候新的html的fontSize就是clientWidth/320*100 */
         document.documentElement.style.fontSize = document.documentElement.clientWidth/320*100 + 'px';  
    }    
 /* 窗口大小发生改变时 */
  window.addEventListener('resize',change,false);})()

标签：em,web,字体大小,适配,px,10px,rem,浏览器
来源： https://www.cnblogs.com/straybirds/p/13871853.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

像素2（web中css的rem适配）

px、em、rem关系：