移动端适配--今日，你学识咗未吖

Posted 2020-11-11 brownchan

移动端适配   是我以前开发中思考的最久的一个东西，上网找到的都是用什么库 啊框架 啊之类来解决适配问题的。

但经过一段时间的移动开发之后，总算不头疼这个问题了，以下就是我开发中用到的适配方式，可以说是非常详细的，希望能帮到需要帮助的猿！！

 

第一种方式：（代码 + 说明）

　　var screenWidth = 屏幕宽度；
　　var designWidth = 设计稿宽度；
　　var fontSize = 字体基础值；
　　var htmlPX；

 

　参数说明：

　　屏幕宽度 就是指要适配的手机屏幕宽度
　　设计稿宽度 就是指UI稿的宽度
　　字体基础值 可以随便设置，但是这个会影响你实际布局的时候值的计算(数学好的当我没说过)，我一般设置为100
　　htmlPX 就是根节点的字体font-size值

 

　htmlPX 的公式为：

　　screenWidth / designWidth * fontSize = htmlPX;

 

 

　然后媒体查询就可以写成这样了

　　@media only screen and (max-width: screenWidth),
　　only screen and (max-device-width: screenWidth) {
　　　　html,body {
　　　　　　font-size: htmlPX;
　　　　}

　　},

　　注意： 上面的变量全都要换成具体的值再放到里面的，要是直接复制粘贴过去，除了问题就别找我了。。

 

　　然后在写css的时候，有px单位的（不考虑border的情况下）都要转成rem单位，并且数值要除以fontSize(这个最好设置100啦，容易计算；例如我盒子宽度设置150px,做成适配的rem布局就是150/100=1.5rem了)

 

　举个栗子：

 

　　假如我要做适配，设计稿宽度为750，基础字体值为100，还有一些其他css,我要适配375,414,320屏幕的手机，那么我就在css文件里面这样写：

 

　　

@media only screen and (max-width: 414px),
    only screen and (max-device-width: 414px) {
        html,body {
            font-size: 55.2px;
        }    
    
    };
    @media only screen and (max-width: 375px),
    only screen and (max-device-width: 375px) {
        html,body {
            font-size: 50px;
        }    
    
    };
    @media only screen and (max-width: 320px),
    only screen and (max-device-width: 320px) {
        html,body {
            font-size: 42.66666666666667px;
        }    
    
    };

    div {
        width: 1.5rem;
        padding: 0.2rem;
    }

　　一般来说，宽度最好用百分比这样肯定不会出问题，如果非要用rem，那就愿天主与你同在，阿门！！

第二种方式： （代码 + 说明）

　1.先设置header里面的meta标签：

　　　　

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

　　这个设置有什么用我就不用说了，这个满大街都有，移动端必备的代码！！！

 

　2.在header写上<script>标签

　　

<script type="text/javascript">
 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + ‘px‘;
 </script>

　　我们在写css的时候可以直接写rem, 然后数值就写从设计稿上量出来的px数值再除以100加上rem单位，就搞定收工！！

　上面这段代码的跟第一种方式原理一样的，不过第一种方式在电脑上进行调试比较方便，不用每次改变屏幕大小都要刷新一遍，而第二种方式在电脑上调试的时候就麻烦一点。（虽然只是一个F5而已。。）

　个人认为还是第一种比较好，因为层叠样式表(css)就是为了改变样式而产生的，而脚本(JavaScript)就是为了改变行为方式而产生的，所以适配还是用css来写比较符合W3C工作者的初衷。

 

　以上仅为个人观点，但内容目测和实测都可实现具体功能。

　不喜勿喷，，如有错误，欢迎指出，必回！！喜欢的就请留下个赞呗~~