Vue 이동 단 은 타 오 바 오 탄성 레이아웃 lib-flexible 플러그 인 으로 적합 한 방법 을 만 듭 니 다.

타 오 바 오 신축성 레이아웃 lib-flexible
lib-flexible 은 단독으로 사용 하지 않 고 px2remy-loader 와 함께 적합 한 방안 을 만 듭 니 다.css 의 px 를 remi 로 자동 으로 변환 하 는 것 이 목적 입 니 다.프로젝트 에 서 는 디자인 원고 에 대응 하 는 고정 픽 셀(px)을 쓰 면 됩 니 다.
이동 단 에 적합 한 구체 적 인 절차
첫 번 째 단계:플러그 인 lib-flexible 설치

npm i lib-flexible --save-dev

두 번 째 단계:px2rem loader 설치

npm install px2rem-loader --save-dev

세 번 째 단계:main.js 에 lib-flexible 도입

import 'lib-flexible/flexible'

네 번 째 단계:build 의 util.js 파일 에 px2remy-loader 를 설정 합 니 다.
build 파일 에 있 는 utils.js 파일 을 찾 아 cssLoaders 함 수 를 찾 아 px2rem-loade(아래 코드)를 함수 에 추가 합 니 다.

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
   remUnit: 75 // remUnit   rem         /    = remUnit
  }
 }

그리고 cssLoaders 의 generateLoaders 함 수 를 찾 아 px2rem-loader 를 추가 합 니 다.

function generateLoaders (loader, loaderOptions) {
  
	const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

	 if (loader) {
	  loaders.push({
	   loader: loader + '-loader',
	   options: Object.assign({}, loaderOptions, {
	    sourceMap: options.sourceMap
	   })
	  })
	 }

(내 편집기 배경 을 무시 하 세 요.하하!)
프로젝트 전시
코드 에서 두상 너비 와 높이 스타일 은 130 px 이 고 프로젝트 는 750 px 의 디자인 원 고 를 예 로 들 면

375 px 화면 을 예 로 들 면:

411 px 화면 을 예 로 들 면:

768 px 화면 을 예 로 들 면:

한 마디 로 하면 프로젝트 가 lib-flexible 플러그 인 을 사용 하면 요소 의 폭 은 핸드폰 의 해상도 크기 에 따라 자동 으로 조절 되 어 모 바 일 화면 에 적합 합 니 다!
그러나 현재 이 플러그 인 은 유지 보 수 를 중단 하 였 으 나 사용 을 지체 하지 않 습 니 다.lib-flexible 을 검색 할 때 github 에서 나 온 일 amfe-flexible,

다음은 amfe-flexible 의 git 주소 가 있 습 니 다.여러분 은 일이 없어 도 공 부 를 할 수 있 습 니 다.lib-flexible 은 좋 지만 우리 도 시대와 함께 나 아가 야 합 니 다!amfe-flexible.
총결산
Vue 모 바 일 에서 타 오 바 오 탄력 레이아웃 lib-flexible 플러그 인 으로 어 울 리 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 모 바 일 어 울 리 는 플러그 인 lib-flexible 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!