移动端 rem适配方法

　　　　　　　　　　　　　　　　　　　　rem适配
一, 网易适配方法
         屏幕宽度/设计稿rem宽度=页面动态font-size值（如：375/7.5=50）
         document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘;

解释:

        这样就设置好了每个页面的根fonts-size，因为rem单位是基于根font-size，因此只要确定一种设计稿对应手机的换算，其余屏幕尺寸均可自动适配。

       上面我们得出设计稿换算rem的基准值是100，因此只需要把设计稿上的px值除以100即为我们要的rem值。

        > Px/100=rem，所以100px=1rem,25px=0.25rem

二, 手淘适配方法

　　大名鼎鼎的Flexible

　　引入： 直接引用阿里的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"

　　cssrem: 配值设置

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

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

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

三, 通用方案

　　通用方案——1rem=100px

　　代码如下:
　　

*{margin:0;padding:0;}
html{
font-size: 625%;
}
.box1{
width:0.5em;
height:0.5rem;
background-color: #000;

}
.box2{
width:1.25rem;
height:1.25rem;
background-color: #005aff;
color:#fff;
font-size: 0.15rem;
}
@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%; }
}

换算:
　　1rem=100px(设计稿px换算直接/100即可得到rem值。)

网易方案
　　1、拿到设计稿除以100，得到宽度rem值

　　2、通过给html的style设置font-size，把1里面得到的宽度rem值代入x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px‘;

　　3、设计稿px/100即可换算为rem

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

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

手淘方案
　　1、拿到设计稿除以10，得到font-size基准值

　　2、引入flexible

　　3、不要设置meta的viewport缩放值

　　4、设计稿px/ font-size基准值，即可换算为rem

　　优：通过动态根font-size、viewpor、dpr来做适配，无兼容性问题，适配精准。

　　劣：需要根据设计稿进行基准值换算，在不使用sublime text编辑器插件开发时，单位计算复杂。


通用方案
　　1、设置根font-size：625%（或其它自定的值，但换算规则1rem不能小于12px）

　　2、通过媒体查询分别设置每个屏幕的根font-size

　　3、css直接除以2再除以100即可换算为rem。

　　优：有一定适用性，换算也较为简单。

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


备注:
　　每个人评判的标准不同。但个人更倾向flexible，动态计算viewport和针对iphone手机的dpr缩放使得页面适配更加精确，而且手淘页面用户访问量比网易页面大很多。

转载于:https://www.cnblogs.com/shenjilin/p/10560135.html