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

 

        作为一枚妥妥的小白，在没有丝毫觉悟的情况下，用刚入坑的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的，其实我试了，效果没啥区别，也有可能我没发现区别之处，也不是很理解这个东西。

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

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

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