vue 프로젝트 는 웹 팩 2 에서 모 바 일 글꼴 자체 적응 기능 을 실현 합 니 다.

vue 를 사용 하여 모 바 일 페이지 를 개발 할 때 페이지 가 서로 다른 장치 화면 에 따라 사이즈 의 적합 을 실현 하고 px 를 자동 으로 remi 단위 로 환산 해 야 합 니 다.사실은 아래 의 두 플러그 인 만 설치 하면 모 바 일 어댑터 문 제 를 신속하게 실현 할 수 있 습 니 다.
1 준비 작업:
a.px2rem-loader 플러그 인 설치:npm install px2rem-loader--save;
b.lib-flexible 플러그 인 설치:npm install lib-flexible--save;
2 플러그 인의 역할:
px2rem-loader 플러그 인의 역할:저 희 는 설정 기준 을 통 해 px 를 remi 로 자동 으로 환산 합 니 다.
lib-flexible 플러그 인의 역할:루트 노드 는 페이지 의 시각 변화 에 따라 font-size 크기 를 변화 시 킵 니 다.
3 utils.js 파일 에 px2remy-loader 설정:
위의 두 플러그 인 을 설치 한 후 package.json 에서 설치 성공 여부 와 버 전 정 보 를 볼 수 있 습 니 다.사실은 보통 플러그 인 을 설치 할 때 자신 이 지정 한 버 전이 없 으 면 최신 버 전 을 자동 으로 설치 합 니 다.

4.build 디 렉 터 리 에 있 는 utils.js 파일 열기:

아래 에 대응 하 는 위 치 를 찾 아 빨간색 상자 의 코드 를 추가 합 니 다:
예 를 들 어 제 가 받 은 것 은 750 의 디자인 원 고 였 고 저 는 750 을 기준 으로 설정 되 었 습 니 다.그래서 스타일 을 쓸 때 디자인 원 고 는 몇 개의 px 를 표시 하 는 지 저 는 직접 몇 개의 px 를 쓰 면 됩 니 다.브 라 우 저 는 자동 으로 remi 단 위 를 환산 합 니 다.

현재 파일 에서 아래 generateLoaders(loader,loader Options)방법 을 찾 아 방금 추가 한 px2remLoader 대상 을 아래 밑줄 위치 에 추가 하면 됩 니 다.

그리고 현재 항목 의 첫 페이지 입구 파일 index.html 를 엽 니 다.

메타 태그 추가:

위의 그림 에서 meta 태그 의 속성 에 대한 간단 한 설명:
viewport:쉽게 말 하면 현재 모 바 일 브 라 우 저 는 웹 페이지 의 내용 을 표시 하 는 시각 적 영역 을 말 합 니 다.모 바 일 장 치 는 기본 값 을 980 px 또는 1024 px 로 자동 으로 설정 합 니 다.
width=device-width:현재 레이아웃 의 시각 이 이상 적 인 시각 과 일치 함 을 나타 낸다(js 이상 적 인 시각 가 져 오기:window.screen.width).
initial-scale:페이지 가 처음 표 시 될 때의 크기 조정 비율 을 설정 합 니 다.값 이 1.0 일 때 현재 크기 조정 되 지 않 은 페이지 를 표시 합 니 다.
사실 콘 텐 츠 에 다른 속성 도 설정 할 수 있 습 니 다.예 를 들 어:
maximum-scale:페이지 의 최대 크기 조정 비율;
minimum-scale:페이지 의 최소 크기 조정 비율;
user-scalable:사용자 가 페이지 를 수 동 으로 크기 조정 할 수 있 는 지,값 은 no 또는 yes 로 각각 크기 조정 과 크기 조정 을 허용 하지 않 음 을 표시 합 니 다.
4 프로젝트 에 lib-flexible 사용 하기:
현재 프로젝트 의 main.js 에 만 도입:lib-flexible/flexible

5 효과:


6.요약:
위 에서 utils.js 파일 에서 px2rem 를 사용 하 는 것 과 관련 된 설정 을 한 후 px 를 remi 로 자동 으로 환산 하 는 데 성공 하 였 습 니 다.
main.js 에 lib-flexible/flexible 을 도입 하여 루트 노드 가 페이지 의 시각 변화 에 따라 font-size 크기 를 변화 시 키 는 데 성공 하 였 습 니 다.
포인트 그리 기:
remi 를 설정 하 였 습 니 다.프로젝트 의 스타일 은 px 를 직접 쓰 면 됩 니 다.브 라 우 저 에서 본 것 은 모두 자동 으로 remi 로 환산 합 니 다.
vue 프로젝트 가 웹 팩 2 에서 모 바 일 글꼴 자체 적응 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 웹 팩 2 모 바 일 글꼴 자체 적응 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!