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为单位的方式进行样式布局。



  
    
    
    
    m
  
  
    

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

你可能感兴趣的:(Vue,移动端适配)