rem的详解以及更好的适配手机不同众多终端

为什么使用rem？

     因为rem是相对单位，他会随着手机屏幕的大小变化而变化，em也是相对单位，他的变化是随着父元素变化的，如果嵌套的div过多，里面的那一层换算起来就很麻烦。建议还是使用rem相对于根元素：html。

通用换算和一些坑

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

为什么是62.5%？大多数浏览器的默认字号为16px，因此1rem=16px，不方便px和rem的换算，假设1rem=10px，这样就好换算多了。因此用10/16

如果是640的设计稿，需要/2转化为iphone5屏幕的等宽的320.所以设计稿/2/10转为rem。之后在媒体查询设置每个屏幕大小的font-size百分比，页面会根据上面设置的根的font-size适配。这样做的避免了一个问题：移动端rem布局，刷新和加载的时候，刷新过程中页面先变小，然后刷新完正常 ，如果网好的话，不是很明显，如果网卡的不行，那就太明显了。网上的解决办法很多。我只会这一个，别的不知道怎么实现，

例如：

　　解决方法一:设置body隐藏，调用转换成rem的js完成之后显示body              我不知道怎么判断这个js调用完成了，也百度了一下，可是还是不知道怎么实现？希望以后的我能解决这个问题。也希望有看到的大神能告诉我一下。

        解决方法二：（我是我写博客写着写着想起来的，和上面的类似了好像）可以改手机加一个加载动画，等全部加载完成了在显示页面

 

步入正题

  上面的把1rem换算成10px,有一个坑，

　　1.因为rem是css3的属性，有些浏览器的早期版本和一些国内的浏览器的默认字号不是16px，那么上面的10/16换算就不成立。直接html：font-size:62.5%不成立

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

解决方法：将1rem=100px  或者是别的比例值。我习惯用这个比例值。；不要再pc端使用rem。在pc看到你的页面的时候。你整个人可能都会崩溃。

那么就要在你的页面根元素样式改为:

 

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%; }
}

或者

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 357.4% !important; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 373.4% !important; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 381% !important }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 396.25% !important; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 410.6% !important; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 427.75% !important; }
}

第一种是直接copy的，第二份是根据我的换算的。我加这些之前还调用了那个转换的js。可能因为这个吧。但是pc打开就惨不忍睹了。

 

 

还有很多方法。

参考网址:http://www.mamicode.com/info-detail-1816919.html

手机淘宝的方法:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

之前以为手机端挺好写的。没想到也这么难。要适配很多不同的终端。pc网站是需要兼容各种浏览器。惨啊！