vue 모바일 컴퓨팅 최적 해결 방안, 직접 측정 유효

최근에 상점의 프로젝트를 하고 있는데 짱인 ui가 잘 어울린다는 것을 발견했습니다. 그런데 문제는 짱인 ui가 사용하는 단위가 px라서 모바일 기기의 어울림을 할 수 없다는 것입니다. 홈페이지에서 제공한 vw 어댑터 방안이 안 된다는 것을 발견했습니다. 결국rem로 어댑터를 하기로 결정했습니다. 인터넷에 검색해 보니 사용 가능한 방안이 나왔습니다. 직접 테스트하면 효과가 있습니다.
그것의 원리는 px2rem 플러그인을 빌려 px 단위를rem로 쉽게 바꾸는 것이다
구체적인 단계:

설치

npm install px2rem-loader  lib-flexible --save

main.js에lib-flexible

도입

import 'lib-flexible/flexible.js'

build 아래의utils.js에서generateLoaders 방법을 찾아 다음 코드를 추가합니다

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
    remUnit: 37.5
    }
}

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader, px2remLoader]
    if (loader) {
        loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
        sourceMap: options.sourceMap
        })
    })
}

프로젝트를 다시 시작하면 자신이 설정한 px가rem로 바뀌었음

하지만 한계가 있다

이상 변환은 (1) 구성 요소에 작성된 css

에 css

에서 @import'././static/css/reset.css(상(2), (3)의 형식을 고려하여 도입)

그리고 제가 보충하고자 하는 것은 이동단이 어울릴 때 글씨체도rem의 단위를 설정하는 것을 권장하지 않습니다. 이런 경우 제가 글씨체에 어울릴 수 있는 해결 방안은 미디어 조회를 사용하는 것입니다.파일은 구성 요소 <스타일/> 중 @import"././static/css/reset.css 형식을 도입하여 이동단 어댑터 문제를 완벽하게 해결할 수 있습니다

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

벚꽃 편집기에서 선택한 텍스트를 자동으로 표시하는 방법

벚꽃 편집기에서 로그 파일 등을 참조할 때 선택한 문자를 자동으로 표시하는 것이 편리하다. 벚꽃 편집기에서 문자를 두 번 눌렀을 때 선택한 문자를 자동으로 표시하는 방법을 소개한다. 두 번 클릭하고 문자를 선택하면 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue 모바일 컴퓨팅 최적 해결 방안, 직접 측정 유효

좋은 웹페이지 즐겨찾기