作为一枚妥妥的小白，在没有丝毫觉悟的情况下，用刚入坑的Vue徒手写移动端，也没有任何要兼容不同手机屏幕的适配意识，惭愧....废话不说，下面讲讲这段时间遭遇到的适配问题~

完全无适配意识

在没有适配意识的情况下，这真的是很伤啊，秉着曾经学习时的方式，编写网页页面，不会想到要在浏览器上切换其他的手机屏幕去调试，结果就会变成自信满满写好一个当前页面，然后当被提醒要看其他手机页面是否兼容时，发现，完全乱套。。所以当着手去开发一个项目时，一定要仔细考虑好，适配兼容问题。

px or rem?

px是自学习前端以来使用最多的单位，初学只是在pc端展示页面，所以看不出px的局限性，在做移动端的过程中，会发现当使用px时，不同手机屏幕下，px无法被转换，从而导致严重的适配问题，通过度娘，开始使用另一种单位rem，度娘说：rem是c3新增的一个相对单位,使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。当然，相对于根元素来调节自身rem值是非常灵活的，起先我尝试过在.vue中修改根元素的font-size值，结果没有任何反应，事实证明，这样是不行的，后来几经调试，最终定下一种方法。

方案：

在index.html页面头部 ,添加这段代码，默认缩放比例为1倍，在这里maximum-scale是默认用户缩放比例，起初我是写过1.0.但是网上有建议写1.3和1.5的，其实我试了，效果没啥区别，也有可能我没发现区别之处，也不是很理解这个东西。

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

光写到这一步，还是无法实现，热锅上的我只能再次求助于度娘，发现在script中添加这样一段代码，问题就解决了，其中被我注销掉的也是用过一段时间，大部分机型都能够适配，然后败在了ipone5/se上，至今我都不明白为什么，，

<script>
//       fnResize()
// window.onresize = function () {
// fnResize()
// }
// function fnResize() {
// var deviceWidth = document.documentElement.clientWidth || window.innerWidth
// if (deviceWidth >= 750) {
// deviceWidth = 750
// }
// if (deviceWidth <= 320) {
// deviceWidth = 320
// }
// else{
//   document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
// }

// }
(function (doc, win) {
        var docEl = doc.documentElement;
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
        };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    }(document,window));
    </script>

最终代码如下，其他的就可以开始进行页面布局的，我用的rem为单位的方式进行样式布局。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.3,minimum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    <title>m</title>
  </head>
  <body style="margin: 0">
    <div id="app"></div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
(function (doc, win) {
        var docEl = doc.documentElement;
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
        };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    }(document,window));
    </script>
  </body>
</html>

最后，如若有错误之处，望指出，好进行修改与学习，上面度娘所提供的代码，我也不是特别懂，但是很有用，有懂的网友还望能够指教一番~

24k纯小白用Vue写移动端页面时遇到的适配坑

完全无适配意识

px or rem?

方案：

猜你喜欢