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

WBOY
풀어 주다: 2023-05-24 13:22:07
원래의
460명이 탐색했습니다.

모바일 인터넷의 발달과 함께 점점 더 많은 웹사이트와 애플리케이션이 모바일 단말기를 주요 접속 방법으로 사용하기 시작했습니다. 모바일 개발에서는 다양한 디바이스 해상도에 어떻게 적응하는가가 중요한 문제가 되었습니다. 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 태그에 다음 코드를 추가하세요.

로그인 후 복사
  1. 플렉스 레이아웃 기능을 활성화하세요.

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); }
로그인 후 복사
  1. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!