Vue 모바일 및 PC 적응을 위해 lib-flexible, amfe-flexible, postcss-pxtorem, postcss-px2rem, postcss-px-to-viewport 플러그인을 사용할 수 있습니다.
lib-flexible 은 Taobao 모바일 프런트 엔드 개발 팀에서 개발한 오픈 소스 플러그인으로 html 헤드에 자동으로 <meta name='viewport'> 태그를 추가하고 html의 글꼴 크기를 다음과 같이 자동으로 설정합니다. 화면 너비를 10으로 나눈 값입니다.
amfe-flexible 은 레이아웃 단위로 vw를 사용하는 lib-flexible의 업그레이드 버전으로 각 화면의 비율이 고정되고 예측 가능하며 제어 가능하기 때문에 다양한 크기의 화면 적응 문제를 근본적으로 해결합니다.
px 단위를 rem으로 변환하기 위한 postcss-pxtorem 및 postcss-px2rem 플러그인. lib-flexible과 함께 사용할 수 있습니다.
postcss-px-to-viewport 플러그인은 px 단위를 vw, vh, vmin, vmax 단위로 변환하는 데 사용됩니다. amfe-flexible과 함께 사용할 수 있습니다.
솔루션 1:
lib-flexible & postcss-pxtorem
1. 설치는 lib-flexible에 따라 다름: npm install lib-flexible --save
2. main.js에서 의존성 가져오기: import 'lib-flexible/flexible'
:
3. 설치는 postcss-pxtorem npm install [email protected] --save-dev 에 따라 다름
4. postcss-pxtorem 구성:
vue-cli2: 루트 디렉터리의 postcss.config.js에서(새로 만들 필요 없음) 다음 코드를 추가합니다.
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 37.5, // lib-flexible 将屏幕分成10份(10rem),这里设置表示设计图宽度为10*37.5=375px
unitPrecision: 5, // 保留rem小数点多少位
propList: ['*', '!border'], // 存储将被转换的属性列表,'!font-size' 即不对字体进行rem转换
selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器,例如fs-xl类名,里面有关px的样式将不被转换,支持正则写法。
replace: true,
mediaQuery: false, //(布尔值)媒体查询( @media screen 之类的)中不生效
minPixelValue: 4, // 设置要替换的最小像素值,px小于4的不会被转换
exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
}
}
}
vue-cli3: 루트 디렉터리의 vue.config.js에 다음 코드를 추가합니다(새로 만들 필요 없음).
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5, // lib-flexible 将屏幕分成10份(10rem),这里设置表示设计图宽度为10*37.5=375px
unitPrecision: 5, // 保留rem小数点多少位
propList: ['*', '!border'], // 存储将被转换的属性列表,'!font-size' 即不对字体进行rem转换
selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器,例如fs-xl类名,里面有关px的样式将不被转换,支持正则写法。
replace: true,
mediaQuery: false, //(布尔值)媒体查询( @media screen 之类的)中不生效
minPixelValue: 4, // 设置要替换的最小像素值,px小于4的不会被转换
exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
})
]
}
}
}
}
5. 주의사항
- 구성이 완료되면 lib-flexible 플러그인이 자동으로 생성할 수 있도록 index.html에서 창 메타 태그 <meta name='viewport'>를 삭제하십시오.
- 일부 px 크기가 rem으로 변환되지 않으려면 px를 대문자로 사용하십시오.
.상자{ 폭:200픽셀; 높이: 200PX; }
해결책 2: lib-flexible & postcss-px2rem
1. 설치는 lib-flexible에 따라 다름: npm install lib-flexible --save
2. main.js에서 의존성 가져오기: import 'lib-flexible/flexible'
:
3. 설치는 postcss-px2rem npm install postcss-px2rem --save-dev 에 따라 다름
4. postcss-px2rem 구성:
vue-cli2: 루트 디렉터리의 postcss.config.js에서(새로 만들 필요 없음) 다음 코드를 추가합니다.
module.exports = {
plugins: {
"postcss-px2rem": {
remUnit: 37.5 //lib-flexible 将屏幕分成10份(10rem),这里设置表示设计图宽度为10*37.5=375px
}
}
}
vue-cli3: 루트 디렉터리의 vue.config.js에 다음 코드를 추가합니다(새로 만들 필요 없음).
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5 //lib-flexible 将屏幕分成10份(10rem),这里设置表示设计图宽度为10*37.5=375px
})
]
}
}
}
}
5. 주의사항
- 구성이 완료되면 lib-flexible 플러그인이 자동으로 생성할 수 있도록 index.html에서 창 메타 태그 <meta name='viewport'>를 삭제하십시오.
- 일부 px 크기가 rem으로 변환되지 않으려면 px를 대문자로 사용하십시오.
.box{ width:200Px; height:200PX; }
옵션 3(권장): amfe-flexible & postcss-px-to-viewport
1. 설치는 amfe-flexible에 따라 다릅니다: npm install amfe-flexible --save
2. main.js에서 종속성 가져오기: import "amfe-flexible/index"
3. 설치는 postcss-px-to-viewport에 따라 다름: npm install postcss-px-to-viewport --save-dev
4. postcss-px-to-viewport 구성:
vue-cli2: 루트 디렉터리의 postcss.config.js에서(새로 만들 필요 없음) 다음 코드를 추가합니다.
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px', // 需要转换的单位
viewportWidth: 750, // 视口宽度,等同于设计稿宽度
unitPrecision: 5, // 精确到小数点后几位
/**
* 将会被转换的css属性列表,
* 设置为 * 表示全部,如:['*']
* 在属性的前面或后面设置*,如:['*position*'],*position* 表示所有包含 position 的属性,如 background-position-y
* 设置为 !xx 表示不匹配xx的那些属性,如:['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
* 还可以同时使用 ! 和 * ,如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
* */
propList: ['*'],
viewportUnit: 'vw', // 需要转换成为的单位
fontViewportUnit: 'vw',// 需要转换称为的字体单位
/**
* 需要忽略的选择器,即这些选择器对应的属性值不做单位转换
* 设置为字符串,转换器在做转换时会忽略那些选择器中包含该字符串的选择器,如:['body']会匹配到 .body-class,也就意味着.body-class对应的样式设置不会被转换
* 设置为正则表达式,在做转换前会先校验选择器是否匹配该正则,如果匹配,则不进行转换,如[/^body$/]会匹配到 body 但是不会匹配到 .body
*/
selectorBlackList: [],
minPixelValue: 1, // 最小的像素单位值
mediaQuery: false, // 是否转换媒体查询中设置的属性值
replace: true, // 替换包含vw的规则,而不是添加回退
/**
* 忽略一些文件,如'node_modules'
* 设置为正则表达式,将会忽略匹配该正则的所有文件
* 如果设置为数组,那么该数组内的元素都必须是正则表达式
*/
exclude: [],
landscape: false, // 是否自动加入 @media (orientation: landscape),其中的属性值是通过横屏宽度来转换的
landscapeUnit: 'vw', // 横屏单位
landscapeWidth: 1334 // 横屏宽度
}
}
}
vue-cli3: 루트 디렉터리의 vue.config.js에 다음 코드를 추가합니다(새로 만들 필요 없음).
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px-to-viewport')({
unitToConvert: 'px', // 需要转换的单位
viewportWidth: 750, // 视口宽度,等同于设计稿宽度
unitPrecision: 5, // 精确到小数点后几位
/**
* 将会被转换的css属性列表,
* 设置为 * 表示全部,如:['*']
* 在属性的前面或后面设置*,如:['*position*'],*position* 表示所有包含 position 的属性,如 background-position-y
* 设置为 !xx 表示不匹配xx的那些属性,如:['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
* 还可以同时使用 ! 和 * ,如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
* */
propList: ['*'],
viewportUnit: 'vw', // 需要转换成为的单位
fontViewportUnit: 'vw',// 需要转换称为的字体单位
/**
* 需要忽略的选择器,即这些选择器对应的属性值不做单位转换
* 设置为字符串,转换器在做转换时会忽略那些选择器中包含该字符串的选择器,如:['body']会匹配到 .body-class,也就意味着.body-class对应的样式设置不会被转换
* 设置为正则表达式,在做转换前会先校验选择器是否匹配该正则,如果匹配,则不进行转换,如[/^body$/]会匹配到 body 但是不会匹配到 .body
*/
selectorBlackList: [],
minPixelValue: 1, // 最小的像素单位值
mediaQuery: false, // 是否转换媒体查询中设置的属性值
replace: true, // 替换包含vw的规则,而不是添加回退
/**
* 忽略一些文件,如'node_modules'
* 设置为正则表达式,将会忽略匹配该正则的所有文件
* 如果设置为数组,那么该数组内的元素都必须是正则表达式
*/
exclude: [],
landscape: false, // 是否自动加入 @media (orientation: landscape),其中的属性值是通过横屏宽度来转换的
landscapeUnit: 'vw', // 横屏单位
landscapeWidth: 1334 // 横屏宽度
})
]
}
}
}
}
제이쿼리
// 判断屏幕宽度,动态设置视口,如果是大屏幕就不设置
if(window.screen.width < 360) {
$('head').append('<meta name="viewport" content="width=1280">')
} else if(window.screen.width < 1366) {
$('head').remove('[name="viewport"]')
$('head').append('<meta name="viewport" content="width=1366">')
}
else {
$('head').remove('[name="viewport"]')
}