前言：

通常情况下vue项目我们都是在本地计算机调试，样式就只是针对PC端了，当打包好通过nginx部署到服务器，在电脑上访问网址是没什么问题，但用手机看页面就完全垮掉

这是在谷歌浏览器切换手机模式调试看到的页面，手机上只会比这个更糟糕

  

---

简要介绍

        造成移动端如此拉胯的原因是之前的代码写的不是很规范，一些宽高属性都是 直接写死了   px ，然后切换后移动端一些图片、文字太大导致显示不出来，还有一些组件叠加堆积整个页面在手机模式看下来我就无语又难过。

没办法，自己造的坑自己也得填好，因为现在不可能说你一个网页适配不了手机端，我现在解决这个问题就只能再加一套移动端的css了

判断设备状态

在页面加载前利用函数判断设备的状态（移动端 or PC）

可以代码加在 mounted 或者 created 里

<script>
export default {
    data(){
        return{
      isPC:true
        }
    },
    mounted(){
        // 判断设备是否是移动端
         let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
       if(flag){
        this.isPC = false
       }
    },
    methods:{   
        
    }
}
</script>

页面通过 v-if ，v-else 分开PC和移动端

在上一步函数判断设备状态后，在代码里面就要建两个盒子来装页面的全部代码了

<template>
  <div class="home">
      <!-- PC -->
      <div class="PC" v-if="isPC">
        
           
      </div>

      <!-- 手机端 -->
    <div class="Phone" v-else>
                     
       
      </div>
  </div>
</template>

里面的内容可以先写好一个的，比如PC，然后把代码复制到移动端

但是要把一些内容的 class  id 属性 改名，然后重写css

 重写css代码

我的这个项目因为当时没有注意代码规范，宽高写死后 ，我就只能在自己一个个修改这些属性

css代码写的时候最好还是 多用  比例 （%）来表示 ，

比如  width ： 20%；

这样的话移动端改动的地方就会竟可能的少，减少我们的工作量

 有足够的注释是很好的习惯

         之前PC我偷懒都没有加注释，而且各个css之间也算是无序的，然后改的时候就只能 ctrl + F 一个个找了，现在我不想偷懒了，只好一个个加上注释，而且顺序也是一个个排下来的

注意：有的手机型号好像对页面样式显示不同，大家可以多切换几个手机型号看看适配程度

 

 

一些建议

        因为我接触前端也不算很久，所以路上犯过很多低级愚蠢的错误，希望在这个前端路上的小伙伴们可以少踩一些坑

注意命名规范

尽量使用驼峰式命名，这样看起来真的舒服不少

• NewComponent.vue ✅
• newcomponent.vue 🛑
• Newcomponent.vue 🛑

 使用语义化标签

一些 div 标签  的 class 、id 属性  尽量逻辑清楚些

像 header  center  footer 布局   ， 代码结构清晰，方便阅读

养成注释的习惯

这个后面修改时会很轻松，不然时隔太久看之前自己的代码也是特别费劲的

总结

1.适配移动端就是通过函数判断设备状态，然后新增一套css

2.写代码时注意代码规范，方便后期修改，有利于团队化开发

---

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会一一回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长  

 

 转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/125249035?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125249035%22%2C%22source%22%3A%22qq_52855464%22%7D&ctrtid=pBDcJ