vue移动端的单位是什么

Vue移动端的单位主要有两种：像素（px）和视口单位。

1. 像素（px）：像素是最常见也是最基本的单位，它是图片、屏幕和显示器中的最小点。在移动端开发中，通过设置元素的宽度、高度、边距等属性时，可以使用像素作为单位进行设置。例如：width: 100px;

2. 视口单位：视口单位是相对于设备屏幕的尺寸而定的单位，主要有以下三种：

   • vw：视口宽度的百分比单位，1vw等于视口宽度的1%。例如，如果屏幕宽度是360px，那么1vw = 3.6px。

   • vh：视口高度的百分比单位，1vh等于视口高度的1%。例如，如果屏幕高度是640px，那么1vh = 6.4px。

   • vmin和vmax：vmin和vmax是视口宽度和高度中较小或较大的那个值。例如，如果屏幕宽度是360px，高度是640px，那么1vmin = 3.6px，1vmax = 6.4px。

在移动端开发中，视口单位可以根据屏幕尺寸自动调整元素大小，适配不同的移动设备。使用视口单位可以实现响应式布局，提高用户体验。

总结一下，在Vue移动端开发中，可以根据具体的需求选择使用像素单位（px）或视口单位（vw、vh、vmin、vmax），根据屏幕尺寸自动调整元素大小，实现不同设备的适配。

在Vue移动端开发中，使用的单位是rem。

CSS中的rem（root em）是相对于根元素（即html元素）的字体大小的单位。对于移动端开发而言，可以将根元素的字体大小设置为设备的宽度的1/10。

使用rem单位的好处是可以实现响应式布局，根据不同的设备屏幕大小来适配页面内容。通过动态改变根元素的字体大小，可以实现页面元素的自适应布局。

在Vue项目中，可以通过以下方式来设置根元素的字体大小：

1. 在入口文件（如main.js）中设置：

import '@/assets/css/reset.css'  // 引入样式重置文件
import '@/assets/css/common.css' // 引入公共样式文件

const setRem = () => {
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
  const htmlDom = document.getElementsByTagName('html')[0]
  htmlDom.style.fontSize = htmlWidth / 10 + 'px'
}

setRem()

window.onresize = function () {
  setRem()
}

2. 新建一个reset.css文件进行样式重置，保证页面元素的一致性：

/* reset.css文件 */
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
blockquote,
th,
td,
figure,
figcaption,
applet,
object,
iframe,
footer,
header,
menu,
nav,
section,
video {
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: Arial, sans-serif;
}

body {
  line-height: 1;
  font-size: 14px;
  background: #fff;
  color: #333;
}

3. 新建一个common.css文件对常用的样式进行定义：

/* common.css文件 */
body {
  font-size: 0.14rem;  // 根据设计稿的大小对字体大小进行调整
}

.container {
  width: 3.6rem;  // 将设计稿的宽度转换为rem单位
  margin: 0 auto;
}

在编写Vue组件时，需要根据设计稿的尺寸来设置样式，例如：

<template>
  <div class="container">
    <h1 class="title">Welcome to Vue Mobile!</h1>
    <p class="content">This is a Vue mobile app.</p>
  </div>
</template>

<style scoped>
.title {
  font-size: 0.2rem;
  margin-bottom: 0.1rem;
  color: #333;
}

.content {
  font-size: 0.16rem;
  color: #666;
}
</style>

通过以上方式，可以在Vue移动端项目中使用rem单位来进行响应式布局，实现页面元素的适配。

在vue移动端开发中，通常采用的是rem作为单位。在移动端使用rem单位，可以根据设备的屏幕大小自动调整元素的大小，适应不同的手机屏幕。下面将从以下几个方面详细介绍vue移动端中的单位rem的使用方法和操作流程。

1. 设置html根元素的字体大小
   在vue项目中，可以通过在入口文件（main.js）中设置html标签的根元素字体大小，以rem单位的方式来编写样式。在设置html根元素字体大小时，可以根据设备的屏幕大小来动态设置。常用的动态设置html根元素字体大小的代码如下：

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

上述代码会根据当前屏幕的尺寸动态设置html根元素的字体大小，以便在不同设备上实现自适应。

2. 使用rem单位编写样式
   在vue项目中，可以使用rem单位编写样式。以iPhone6的屏幕宽度750px为基准，设定1rem等于100px，则可以根据屏幕的大小来设置元素的尺寸。例如：

// 在样式文件中
.rem-box{
    width: 7.5rem;
    height: 2rem;
    font-size: 0.24rem;
}

// 在vue组件中的style标签中
<style scoped>
.rem-box{
    width: 7.5rem;
    height: 2rem;
    font-size: 0.24rem;
}
</style>

在上述代码中，width和height属性设置的是rem单位的尺寸，font-size属性设置的是rem单位的字体大小。

3. 配合less或sass等css预处理器使用
   vue项目中可以使用less或sass等css预处理器来更方便地编写样式。在使用css预处理器时，可以定义一些函数来实现rem单位的计算。例如，在less中可以定义一个rem函数来计算rem单位的值：

@rem: 100px;

.rem(@property) {
  @value: unit(@property / @rem, rem);
}

.rem-box {
  width: .rem(750);
  height: .rem(200);
  font-size: .rem(24);
}

上述代码中，通过定义rem函数来计算rem单位的值，以便在编写样式时直接使用rem函数来计算rem单位的数值。

综上所述，vue移动端常用的单位是rem。通过设置html根元素的字体大小，并配合css预处理器的使用，可以更方便地使用rem单位编写样式，实现移动端页面的自适应。