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

前言;

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

那就是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,也就实现了自适应的效果。

posted @ 2018-11-02 15:12  茶记忆  阅读(578)  评论(0编辑  收藏  举报