uniapp에서 너비를 750으로 설정하는 방법

프론트엔드 개발에서는 적응이 매우 중요한 문제입니다. 다양한 화면 크기와 다양한 장치로 인해 페이지가 다르게 표시되기 때문입니다. uniapp에서는 너비를 750으로 설정하여 이 문제를 해결할 수 있습니다.

750폭은 어디서 나오나요?

750 너비는 모바일 개발에서 일반적인 디자인 초안 크기입니다. 일반적인 상황에서 디자이너는 UI 디자인 초안의 너비를 750으로 설정하고 높이는 실제 상황에 따라 결정됩니다. 디자인 초안의 너비가 750인 이유는 무엇입니까? 많은 모바일 기기의 최소 해상도가 750이기 때문입니다. 예를 들어 iPhone XR의 해상도는 828*1792로 기본적으로 1:1.78 비율을 충족합니다.

uniapp에서 너비를 750으로 설정하는 방법은 무엇입니까?

uniapp을 개발하기 전에 uni-app 플러그인을 설치해야 합니다. 설치가 성공한 후 코드 작성을 시작하세요.

1. main.js 파일에 다음 코드를 추가하세요:

import 'uni-percentage-support'

이 코드 줄을 사용하면 uni-percentage-support 플러그인을 uniapp에 도입하여 페이지에 해당 조정을 적용합니다.

2. App.vue 파일에 다음 코드를 추가하세요.

<style>
  html{
    font-size:50vw;
  }
</style>

여기서는 px 대신 vw(뷰포트 백분율 단위)를 사용합니다. 그 중 1vw는 창 너비의 1%와 같습니다. 너비 750을 기준으로 조정해야 하므로 루트 요소인 html의 글꼴 크기를 50vw로 설정하여 너비 750을 기준으로 페이지를 조정할 수 있도록 했습니다.

3. 조정이 필요한 페이지에 다음 코드를 작성합니다.

<view style="width:100%;height: 100%;background-color:#f5f5f5;">
  <view style="width:37.5rem;height:3rem;margin: 0 auto;background-color:#409EFF;border-radius:5px;"></view>
</view>

여기서는 컨테이너의 너비를 100%, 높이를 100%로 설정했습니다. 내부적으로 너비 37.5rem, 높이 3rem의 레이블을 설정하고 margin: 0 auto를 사용하여 중앙에 배치합니다. App.vue 파일에서 html의 글꼴 크기를 50vw로 설정했기 때문에 여기서 37.5rem은 실제로 750px와 같습니다.

위 작업을 통해 너비 750을 기준으로 페이지를 조정할 수 있습니다.

요약

유니앱에서는 너비를 750으로 설정해서 적응시키는 것이 일반적인 방법입니다. uni-percentage-support 플러그인을 설치하고 HTML의 글꼴 크기를 설정하면 750 너비를 기준으로 페이지를 조정할 수 있으므로 다양한 장치의 화면에서 유사한 효과를 나타낼 수 있습니다. 물론 이러한 매개변수는 실제 상황에 따라 조정되어 최상의 결과를 얻을 수도 있습니다.

위 내용은 uniapp에서 너비를 750으로 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!