如何解决各类尺寸移动端自适应的问题？

前言；

做移动端的同学都知道，移动端的尺寸参差不齐，那么如何才能实现各移动端情况下，都能很好地自适应尺寸大小呢？

那就是rem这个单位！我们可以利用js来控制1rem在不同的移动端尺寸情况下对应不同的px（px是绝对单位）。

实现方式:

有兴趣的可以搜淘宝的flexible.js前端自适应解决实现方案，但是那个相对复杂一些，后期转换rem也不方便。

那么，我推荐利用如下方式来进行实现移动端的自适应（貌似算网易的解决方案）。

如何实现呢？很简单。代码如下：（这段代码适合于现在移动端按照宽度750来进行设计，也就iphone6的宽度）

特别注意：

引入该js文件（文件名，你自己取），要引入在css文件之前。

 

(function () {
    var html = document.documentElement;
    var windowWidth = html.clientWidth;
    html.style.fontSize = windowWidth / 7.5 + 'px';
})();
//这段代码的目的是在你调试的切换屏幕的时候，实现响应式。但是项目中无需下面这个代码也可以
window.onresize = function () {
    var html = document.documentElement;
    var windowWidth = html.clientWidth;
    html.style.fontSize = windowWidth / 7.5 + 'px';
}

 

 

 

如何使用：

如果我们的设计稿都是利用750*1334这个尺寸来设计，那么我们利用设计稿的尺寸除以100，然后用rem做单位，就可以实现移动端的自适应！

后记：

rem的概念：rem 是html 的font-size大小，一般为 16px。

我们就是用js来动态改变html 的font-size大小，从而改变了1rem对应的px，也就实现了自适应的效果。