rem个人理解笔记

rem个人有四种方案

第一种是

1.我看了网上很多关于rem的资料，基本都说浏览器的默认字号就是16px，然后直接定义font-size:62.5%。但是，rem属于css3的属性，有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px，那么上面的10/16换算就不成立，直接给html定义font-size: 62.5%不成立。

2.chrome强制字体最小值为12px，低于12px按12px处理，那上面的1rem=10px就变成1rem=12px，出现偏差（下面给demo）。

解决方案： 将1rem=10px换为1rem=100px（或者其它容易换算的比例值）;不要在pc端使用rem。

那么上面的页面根元素样式要改为：

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

再用本工厂总结得出的各分辨率媒体查询换算：

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }
}

通过媒体查询给font-size不同的百分比，根目录的font-size的大小固定为16px

缺点：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配。

第二种：

网易方案：

设计思想是:始终保持屏幕的总宽度是7.5rem（因为网易的设计师设计的设计稿一般是750，若375则可以设置基准为3.75，其实在原设计稿下1rem=100px，fontsize的值为100px），动态的改变fontSize的值

动态fontSize值=屏幕宽度/设计稿rem宽度（375/7.5=50）

网易的前提是设置meta值，页面不能缩放

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

优：通过动态根font-size来做适配，基本无兼容性问题，适配较为精准，换算简便。

劣：无viewport缩放，且针对iPhone的Retina屏没有做适配，导致对一些手机的适配不是很到位。

第三种方法

• 引入： 直接引用阿里的CDN文件（或下载到本地引入）

  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  

  设定： 页面不要设定 。Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。

  换算： 假设拿到的设计稿和上述网易的一样都是750，Flexible会把设计稿分为10份，可以理解为页面width=10rem，即1rem=75px，所以根font-size（基准值）=75px。

之后的css换算rem公式为：

px/75=rem,所以100px=100/75=1.33rem,50px=50/75=0.66rem

第四种是使用插件的方式

显然，可以看出px与rem的换算因为基准值的不同而有些复杂，甚至需要借助计算器的辅助。在这里推荐一个换算神器：cssrem

安装好之后，做一些设置

px_to_rem - px转rem的单位比例，假设拿到设计稿750，基准值是75，此处就设75

max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。

available_file_types - 启用此插件的文件类型。[".css", ".less", ".sass", ".scss"]。