移动端适配解决方案rem的js换算（非font-size:31.25vw,非font-size:62.5%）

版权声明： https://blog.csdn.net/xiasohuai/article/details/83934975

在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的宽高也是取平衡值写死，然后部分样式通过媒体查询来设置，例如背景图的多倍图、基础字体大小、图标宽高。

这样做的弊端很明显： 1. 做出来的页面在各种手机端看起来的物理大小（高度）是一样的，所以在大屏手机会觉得页面稍小，小屏手机页面稍大 2. 如果要使高度能更好的适应各种手机屏幕，需要写太多的媒体查询样式，效率低下 3. 全屏背景图片跟页面元素需要耦合时，元素位置的确定尤为困难（可能需要通过百分比去确定元素的横向位置，但始终会有误差） 

 

（1）方案的简单介绍: 基于rem

前提：页面元素的布局尺寸全都以设计稿为基准等比例设置。

给

html

根节点设置一个基础

font-size

值，然后页面的所有元素布局均相对于该font-size值采用

rem

单位设定。那么基础的font-size值该如何取呢？

假如通过媒体查询设置font-size，只能解决一部分的情况，而且并不能完成适配，因为手机屏幕宽度类型实在太多了，所以font-size的取值要通过js计算，取当前viewport的

deviceWidth

与

设计稿的宽

的 

比例

值，例如：我们的设计稿尺寸都是

640px

的，iphone5的

deviceWidth

是

320px

，那么计算出来的font-size值就是 320 / 640 = 0.5，因为得出的font-size太小，不方便计算，且有的浏览器可能不兼容太小字号，所以将font-size放大100倍，所以最终计算出来的font-size为 320 / 640 * 100 = 50(px); 当然，这个值是根据设计稿来计算的，所以根据计算规则，下面列出几种常见设计稿相应的font-size值：

[code]deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

可在

script

标签加上如下代码:

[code](function () {
document.addEventListener('DOMContentLoaded', function () {
var html = document.documentElement;
var windowWidth = html.clientWidth;
html.style.fontSize = windowWidth / 640 * 100 + 'px';
// 等价于html.style.fontSize = windowWidth / 6.4 + 'px';
}, false);
})();

// 这个640就是根据设计稿的横向宽度来确定的，假如你的设计稿是750
// 那么 html.style.fontSize = windowWidth / 750 * 100 + 'px';

至此，font-size的基础值就确定好了，而且知道该font-size值是手机deviceWidth跟设计稿的比例值 的 100倍

（2）那么页面元素该如何设置宽高、边距

例如：一个设计稿宽高为140px的图标，左边距为50px，那么它的css应该这样写

[code].icon {
width: 1.4rem; /* 像素换算rem：140px / 100 = 1.4rem */
height: 1.4rem;
margin: 0 0 0 .5rem;
}

因为html的font-size是放大了100倍，所以计算rem时，要用设计稿的实际像素除以100，140px / 100 = 1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽 的 比例 自动计算出来。【这里不 除以2是因为它是根据640或者750来算的】

(3)关于背景图片的错位问题

如果是用的雪碧图（就是将很多很多的小图标放在一张图片上,就称之为雪碧图），通过换算rem设置background-size跟background-position的时候，在一些手机型号下会出现背景图错位的情况，如下图：

解决方法：

1.去掉默认背景图，写background:none

[code].icon-fix {
background: none;
position: relative;
overflow: hidden;
}

2.使用伪元素，将背景图放大100倍，定位位置也放大100倍，之后再将伪元素缩小100倍，这样提高了size跟position的精度，就会解决这个问题了。

 

当然单个图片，这个时候就不存在background-position的需要，只需设定

background-size: contain;

即可，这样做的弊端就在于无法使用雪碧图，图片请求增多，适用于页面图标较少的情况

 

淘宝和网易案例详细说明，以及移动端适配详细说明，请参考网址：https://www.cnblogs.com/Charliexie/p/6900640.html

 

 

阅读更多