vue写的移动端项目如何适配

一、使用vue框架搭建项目

二、项目搭建完成之后进行相关配置

1.public-》index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
      /*iphone 6/7/8   根字体为100px */
      html{font-size:13.33333333vw}
 </style>
  <!-- 
      vw + rem 适配
      1vw表示1%的屏幕宽度， 即屏幕宽度被分为100份vw
      width:1rem 的div 就是50px* 50px (iphone6为2倍屏,即对应750px设计稿上的100px*100px)
      7.5 rem = 100vw = 750px 设计稿 =》1px = 0.1333333vw =》 100px = 13.33333vw => 100px = 1rem
      以iPhone6/7/8为设计稿标准， 宽度为 180 px
      该元素的宽度（rem）= 180 / 100 = 1.8 rem
     -->

三、页面当中样式的编写就直接用rem写就行

四、图片适配等 可以参考下面这篇

添加链接描述