Vue 모바일 단말기가 적응할 수 없습니다

모바일 인터넷의 발달과 함께 점점 더 많은 웹사이트와 애플리케이션이 모바일 단말기를 주요 접속 방법으로 사용하기 시작했습니다. 모바일 개발에서는 다양한 디바이스 해상도에 어떻게 적응하는가가 중요한 문제가 되었습니다. Vue 개발자의 경우 모바일 적응을 위해서는 다양한 화면 크기, 밀도 및 방향에 대한 적응 문제를 고려해야 합니다.

전통적인 각색 방법은 미디어 쿼리와 rem 단위를 통해 달성됩니다. 구체적인 방법은 먼저 다양한 화면에 대해 다양한 스타일 파일을 설정한 다음 rem 단위를 사용하여 루트 요소의 너비를 기준으로 글꼴과 요소 크기를 조정하는 것입니다. 모바일 장치는 일반적으로 장치 픽셀 비율(DPR)이 1보다 큰 고화질 화면을 사용합니다. 디스플레이 효과를 보장하려면 뷰포트를 사용하여 올바른 배율 비율을 설정해야 합니다. 다음은 rem 단위를 기반으로 한 적응 방식의 예입니다.

/* 设置用于计算 rem 值的根元素字体大小 */
html {
  font-size: 16px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  /* 针对 4 英寸屏幕设置样式 */
  html {
    font-size: 14px;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  /* 针对 4.7 英寸屏幕设置样式 */
  html {
    font-size: 16px;
  }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
  /* 针对 5.5 英寸屏幕设置样式 */
  html {
    font-size: 18px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* 针对 9.7 英寸 iPad 屏幕设置样式 */
  html {
    font-size: 24px;
  }
}

위 코드에서 볼 수 있듯이 미디어 쿼리를 사용하여 다양한 기기의 화면 너비에 따라 루트 요소의 글꼴 크기를 다르게 설정한 다음 rem 단위를 사용하여 화면 너비에 따라 요소 크기를 조정합니다. 루트 요소.

그러나 이러한 전통적인 각색 방법에는 몇 가지 문제가 있습니다. 첫째, rem은 루트 요소의 글꼴 크기를 기준으로 계산되므로 크기 조정 오류가 있을 수 있습니다. 둘째, 뷰포트 크기 조정 설정에 문제가 있을 수 있으며 이로 인해 일부 요소가 비정상적으로 표시될 수 있습니다.

따라서 Vue 모바일 개발에서는 적응 솔루션으로 플렉스 레이아웃을 사용하는 것이 좋습니다. Flex 레이아웃을 사용하면 다양한 Flex 속성을 설정하여 다양한 크기의 장치에 적응할 수 있다는 장점이 있습니다. 일반적으로 모바일 적응은 다음 단계를 통해 이루어집니다.

1. 뷰포트를 사용하여 올바른 확대/축소 비율을 설정합니다.

HTML 파일의 head 태그에 다음 코드를 추가하세요.

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

2. 플렉스 레이아웃 기능을 활성화하세요.

Vue.js 프로젝트의 sass-resources-loader 플러그인을 사용하면 플렉스 레이아웃 기능을 자동으로 활성화할 수 있습니다.

const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "${path.resolve(__dirname, 'src/assets/scss/flex.scss')}";`
      },
    },
  },
}

그 중 flex.scss 파일 코드는 다음과 같습니다.

/* 开启 flex 布局特性 */
$flex: 1;

$flex-use-strict: false; // 不使用严格模式，防止出现 flex-basis 百分比计算错误

@mixin flex($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

@mixin align-self($align: center) {
  align-self: $align;
}

@mixin flex-wrap($wrap: wrap) {
  flex-wrap: $wrap;
}

.flex {
  flex: #{$flex};
}

.flex-row {
  @include flex(row);
}

.flex-column {
  @include flex(column);
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-center {
  align-items: center;
}

.flex-wrap {
  @include flex-wrap;
}

.flex-self-start {
  @include align-self(flex-start);
}

.flex-self-end {
  @include align-self(flex-end);
}

.flex-self-center {
  @include align-self(center);
}

.flex-self-auto {
  @include align-self(auto);
}

3. rem 설정 디자인 초안의 결의에 따라 가치.

예: iPhone 6/7/8 시리즈(375x667)를 기준으로 디자인 초안 크기는 750x1334입니다. 먼저 루트 요소의 글꼴 크기를 100px로 설정한 다음 다른 요소의 크기를 설정할 수 있습니다. rem 단위의 요소.

html {
  font-size: 100px;
}

@media only screen and (max-width: 480px) { /* 750 x 1334 设计稿在 480 这个断点上相当于 375 x 667 */
  html {
    font-size: 66.7px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) { /* 750 x 1334 设计稿在 768 这个断点上相当于 414 x 736 */
  html {
    font-size: 110.94px;
  }
}

@media only screen and (min-width: 768px) { /* 750 x 1334 设计稿在 768 这个断点上相当于 768 x 1366 */
  html {
    font-size: 153.6px;
  }
}

위 단계를 사용하여 모바일 적응을 구현한 후에는 기존 미디어 쿼리 및 rem을 사용하지 않고 요소 크기를 크게 확장할 수 있습니다. 또한 반응형 플렉스 레이아웃은 다양한 해상도와 방향을 가진 모바일 장치에 적합하며 사용자 장치에 더 잘 적응할 수 있습니다.

위 내용은 Vue 모바일 단말기가 적응할 수 없습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!