programing

모바일에서의 여백/패딩 - Quasar Framework (VueJ)

nicescript 2022. 8. 16. 22:11
반응형

모바일에서의 여백/패딩 - Quasar Framework (VueJ)

사용방법spacing반응성이 좋을 때.예를 들어, 나는 marging을 설정하고 싶다.q-ma-md휴대폰일 때만 사용했으면 좋겠어요.그럼 어떻게 하는 거죠?

이런 스타일로q-ma-mdmd는 여백 값을 의미하며 화면 폭을 지정하지 않습니다.

Quasar는 현재 부트스트랩 및 순풍과 유사한 기능을 제공합니다.문서에서

newable로 하면(quasar.conf.js > framework > cssAddon: true 경유), 간격에 관련된 모든 CSS 클래스에 브레이크 포인트 대응 버전이 제공됩니다.이 기능을 유효하게 하면, CSS 풋 프린트에 현저한 범프가 생기는 것에 주의해 주세요.그러니까 꼭 필요할 때만 하세요.

사용방법:.q-(p|m)(t|r|b|l|a|x|y)-<bp>-(none|auto|xs|sm|md|lg|xl)

예:q-pa-xs-md q-pa-sm-sm q-px-md-lg q-py-md-md q-ma-md-sm

탑재된 기능에서 다음을 사용하여 플랫폼을 확인합니다.

if(this.$q.platform.is.mobile){
this.class_variable='q-ma-md'
}
else{
this.class_variable=''
}

그리고 앞부분에 묶으세요.

<div :class='class_variable'></div>

언급URL : https://stackoverflow.com/questions/50948572/margin-padding-on-mobile-quasar-framework-vuejs

반응형