vue+element ui 然后用媒体查询media实现响应式布局但pc和手机端要写两套样式这种可行嘛 推荐嘛

是可以使用Vue和Element UI来实现响应式布局，并通过媒体查询@media来适配不同的设备。在PC和手机端分别编写两套样式是一种常见的做法，可以根据设备的屏幕尺寸和布局需求来选择加载不同的样式。这样做可以更好地适配不同的设备，提供更好的用户体验。

推荐的做法是使用媒体查询@media来根据设备的屏幕尺寸和布局需求来选择加载不同的样式，而不是完全编写两套样式。这样可以减少重复代码，并且便于维护和更新样式。可以在CSS中使用媒体查询来定义不同屏幕尺寸下的样式，然后在Vue组件中引入这些样式。

例如，可以在CSS中定义以下媒体查询来适配不同的设备：

/* PC样式 */
@media (min-width: 768px) {
  /* PC样式的样式代码 */
}

/* 手机样式 */
@media (max-width: 767px) {
  /* 手机样式的样式代码 */
}

然后，在Vue组件中引入这些样式：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<style scoped>
/* 引入样式 */
@import './path/to/styles.css';
</style>

这样可以根据设备的屏幕尺寸自动加载对应的样式，实现响应式布局