前端vue按1920*1080设计图的页面适配屏幕缩放并适配4K屏详解

在vue前端开发中，实现页面屏幕适配非常重要，你需要让你的网站在不同的屏幕上都能够正常显示，无论是普通的屏幕还是4K屏幕。本攻略将提供实现此目标的方法。

1. 页面设计

为了实现一个自适应的vue页面，你需要先将页面设计成1920*1080的尺寸，这是一个通用的页面尺寸。这个设计尺寸将帮助你在不同的设备上展示合适的视觉效果。

2. 使用viewport

为了让你的网站在不同的屏幕上呈现出合适的视觉效果，你需要在HTML的head部分中添加以下meta标签：

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>

这个标签允许你的页面根据不同设备的屏幕宽度进行缩放。

3. CSS编写

在编写CSS样式时，你需要使用vw和vh单位代替传统的像素单位。vw单位代表页面宽度的1/100，vh代表页面高度的1/100。这将让你的网站在不同的设备上呈现出合适的视觉效果。

下面是一个CSS样式示例：

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

4. 适配4K屏幕

为了让你的网站在4K屏幕上表现出最佳效果，你需要使用媒体查询来检测屏幕的分辨率，并根据不同的屏幕分辨率设置不同的CSS样式。下面是一个示例代码：

@media only screen and (min-resolution: 300dpi) {
    .container {
        width: 50vw;
        height: 50vh;
    }
}

在这个示例中，我们使用媒体查询来检测分辨率是否超过300dpi，如果是，我们就将.container元素的宽高设置为页面宽高的50%。

5. 示例说明

示例1

在Vue中，你可以使用第三方库vue-screen-size来检测屏幕分辨率并设置不同的CSS样式。下面是一个示例代码：

<template>
  <div class="container" :class="{ '4k': is4kScreen }">
    <p>Hello World!</p>
  </div>
</template>

<script>
import { VueScreenSizeMixin } from 'vue-screen-size'

export default {
  mixins: [VueScreenSizeMixin],
  data() {
    return {
      is4kScreen: false
    }
  },
  mounted() {
    if (this.screenWidth >= 3840) {
      this.is4kScreen = true
    }
  }
}
</script>

<style>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container.4k {
  width: 50vw;
  height: 50vh;
}
</style>

在这个示例中，我们使用vue-screen-size库来获取屏幕宽度，并在页面上展示不同的CSS样式，如果屏幕宽度大于等于3840，则展示样式.container.4k。

示例2

下面是一个使用计算属性来设置不同的CSS样式的示例：

<template>
  <div class="container" :style="{ width: containerWidth, height: containerHeight }">
    <p>Hello World!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight
    }
  },
  computed: {
    containerWidth() {
      if (this.screenWidth >= 3840) {
        return '50vw'
      } else {
        return '100vw'
      }
    },
    containerHeight() {
      if (this.screenWidth >= 3840) {
        return '50vh'
      } else {
        return '100vh'
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在这个示例中，我们使用计算属性来计算.container元素的宽高，如果屏幕宽度大于等于3840，则计算宽高为页面宽高的50%。我们在mounted函数中添加了一个resize事件监听器，以便屏幕大小改变时，重新计算.container元素的宽高。

结论

通过正确的CSS编写和媒体查询设置，我们可以让Vue页面根据不同的屏幕宽度和分辨率进行自适应。这将提高你的网站在不同的设备上的可访问性和易用性。