ionic2를 휴대폰, 태블릿 및 기타 장치에 적용하는 방법

이 기사에서는 휴대폰, 태블릿 및 기타 장치에 적용할 수 있는 ionic2 화면 적응의 예제 코드를 주로 소개합니다. 이는 특정 참고 가치가 있으며 관심 있는 친구들이 참조할 수 있습니다.

이 기사에서는 휴대폰, 태블릿 및 기타 장치에 적용하기 위한 샘플 코드를 소개합니다. 자세한 내용은 다음과 같습니다.

권장 편집기는 VS 코드(Visual Studio)입니다. 코드) => 문서 편집만 담당하며 컴파일은 하지 않습니다.

그리고 WebStorm에는 검사 및 컴파일 등이 있습니다. ionic1을 개발할 때는 브라우저를 사용하여 언제든지 버튼을 클릭하여 효과를 탐색하는 것이 매우 편리했습니다. 그러나 ionic2를 개발한 후에는 ionic2가 자동으로 컴파일을 확인하므로, 웹스톰이 정지되어 편집할 수 없게 됩니다.

1. 먼저 테스트로 사이드를 추가하세요

제가 사용하는 프로젝트는 sidemenu

프로젝트 디렉토리에서 다음 명령어를 실행하세요: ionic g page page4

2. 디버깅을 위한 브라우저

Ionic Serve

3. page4.html 파일의 내용을 다음과 같이 수정합니다.

<ion-header > 
 <ion-navbar > 
  <button ion-button menuToggle> 
   <ion-icon name="menu"></ion-icon> 
  </button> 
  <ion-title>title</ion-title> 
 </ion-navbar> 
</ion-header> 
 
 
<ion-content style="background-color: #abaaaa;"> 
  <ion-grid style="height: 100%; display: flex; padding: 0px;"> 
    <ion-row style="background-color: #abaaaa; flex: 2;">  
     <ion-col style="flex: 1; padding: 10px 10px 5px 10px; " > 
      <ion-card style="height: 100%; width: 100%; margin: 0px; background-color: #cdcecf"> 
        <ion-card-content style="height: calc(100% - 30px);"> 
         card content 
        </ion-card-content> 
      </ion-card> 
     </ion-col> 
    </ion-row> 
    <ion-row style="background-color: #abaaaa; flex: 4;">  
     <ion-col style="flex: 1; padding: 5px 10px 10px 10px; " > 
      <ion-card style="height: 100%; width: 100%; margin: 0px; background-color: #434343"> 
 
        <ion-card-content style="height: calc(100% - 30px);"> 
         content 
        </ion-card-content> 
       </ion-card> 
      </ion-col> 
    </ion-row> 
  </ion-grid> 
</ion-content>

실제로 여기서 참조는 b2871cb0b7503914d5179a5a07ca43d1 이 코드는 ionic2가 동적 자체 사용 레이아웃을 구현하는 방법을 보여줍니다.

4. 테스트 효과:

마우스를 사용하여 브라우저 테두리를 드래그하여 페이지 크기를 조정하고 이온화되는 페이지 요소도 동적 크기에 따라 변형됩니다. 이 소프트웨어가 플랫폼 설치 패키지로 컴파일되는 경우. 예를 들어 Android가 컴파일되면 페이지가 Android 화면에 맞게 조정됩니다. 다양한 화면 크기에 대한 장치 적응을 구현했습니다.

위 내용은 ionic2를 휴대폰, 태블릿 및 기타 장치에 적용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!