gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

모바일 중간영역 vw확대 되게

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-07-28 23:38:54 +09:00
parent c1d6a59da5
commit 3ffa60043b
8 changed files with 69 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
kr/assets/css/_utils.scss
View File

@@ -11,57 +11,63 @@ $desktopMax: 1240px;
/*css 디폴트는 모바일이 기준*/
/*반응형, 브라우저 크기가 300px 이하일때*/
@mixin mobileSmall {
@media (max-width: $mobileSmall) {
@content;
}
@media (max-width: $mobileSmall) {
@content;
}
}
@mixin mobile {
@media (min-width: $mobile) {
@content;
}
@media (min-width: $mobile) {
@content;
}
}
@mixin maxmobile {
@media (max-width: $mobile) {
@content;
}
@media (max-width: $mobile) {
@content;
}
}
/*반응형, 브라우저 크기가 800px 이상일때*/
/*@media (min-width: $mobile ) and (max-width: $tablet){*/
@mixin tablet {
@media (min-width: $tablet) {
@content;
}
@media (min-width: $tablet) {
@content;
}
}
@mixin maxtablet {
@media (max-width: $tablet) {
@content;
}
@media (max-width: $tablet) {
@content;
}
}
@mixin maxdesktop {
@media (max-width: $desktopMin) {
@content;
}
@media (max-width: $desktopMin) {
@content;
}
}
/*반응형, 브라우저 크기가 1025px 이상일때*/
@mixin desktopMin {
@media (min-width: $desktopMin) {
@content;
}
@media (min-width: $desktopMin) {
@content;
}
}
/*반응형, 브라우저 크기가 1204px 이상일때*/
@mixin desktopMax {
@media (min-width: $desktopMax) {
@content;
}
@media (min-width: $desktopMax) {
@content;
}
}
/*넓이, 높이 자동 계산함수*/
@mixin square($size) {
$calculated: 32px * $size;
width: $calculated;
height: $calculated;
$calculated: 32px * $size;
width: $calculated;
height: $calculated;
}
// 기준 화면 너비를 설정 (디자인 기준: 예: 1920px)
$design-width: 360;
@function vw($px, $base: $design-width) {
@return ($px / $base) * 100vw;
}

27
kr/assets/css/pdp_detail.css
View File

@@ -3891,12 +3891,10 @@
.displayThemeDesney .available-theme .list {
display: flex;
justify-content: center;
padding-top: 0.6rem;
padding-bottom: 5.6rem;
padding: 0.6rem 2rem 5.6rem;
}
@media (min-width: 501px) {
.displayThemeDesney .available-theme .list {
max-width: 64rem;
margin: 0 auto;
}
}
@@ -3913,20 +3911,20 @@
.displayThemeDesney .available-theme .list ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5.6rem 0.8rem;
justify-content: space-between;
width: 100%;
gap: 5.6rem 0;
}
@media (min-width: 1025px) {
@media (min-width: 768px) {
.displayThemeDesney .available-theme .list ul {
flex-wrap: wrap;
justify-content: center;
gap: 2.4rem;
}
}
.displayThemeDesney .available-theme .list ul li {
overflow: hidden;
width: 15.6rem;
min-height: 19.6rem;
width: calc(50% - 0.4rem);
aspect-ratio: 156/196;
background-color: #fff;
border-radius: 0.8rem;
box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.12);
@@ -3936,6 +3934,7 @@
.displayThemeDesney .available-theme .list ul li {
width: 28.2rem;
height: 36.9rem;
aspect-ratio: inherit;
}
}
.displayThemeDesney .available-theme .list ul li a {
@@ -3988,18 +3987,18 @@
}
.displayThemeDesney .available-theme .list ul li.more {
overflow: visible;
width: 32rem;
height: 19.4rem;
padding: 2.4rem 2rem;
width: 100%;
aspect-ratio: 320/194;
padding: 6.6666666667vw 5.5555555556vw;
margin: 0;
background: url(../images/kia/pdp/display_theme_disney/box_more_m.png) no-repeat center/auto 100%;
border-radius: 2rem 0.8rem 2rem 0.8rem;
border-radius: 7.2222222222vw 0.8rem 7.2222222222vw 0.8rem;
box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.1215686275);
}
@media (min-width: 768px) {
.displayThemeDesney .available-theme .list ul li.more {
width: 61rem;
height: 40.5rem;
height: 41.4rem;
padding: 6.6rem 5.8rem;
margin: -1.8rem 0 0 0;
border-radius: 0;

2
kr/assets/css/pdp_detail.css.map
View File

File diff suppressed because one or more lines are too long

36
kr/assets/css/pdp_detail.scss
View File

@@ -4442,11 +4442,9 @@
.list {
display: flex;
justify-content: center;
padding-top: 0.6rem;
padding-bottom: 5.6rem;
padding: 0.6rem 2rem 5.6rem;
@include mobile {
max-width: 64rem;
margin: 0 auto;
}
@@ -4461,19 +4459,21 @@
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5.6rem 0.8rem;
@include desktopMin {
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
gap: 5.6rem 0;
@include tablet {
justify-content: center;
gap: 2.4rem;
}
li {
overflow: hidden;
width: 15.6rem;
min-height: 19.6rem;
// width: 15.6rem;
// min-height: 19.6rem;
width: calc(50% - 0.4rem);
// min-height: vw(196);
aspect-ratio: 156 / 196;
background-color: #fff;
border-radius: 0.8rem;
box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.12);
@@ -4482,6 +4482,7 @@
@include tablet {
width: 28.2rem;
height: 36.9rem;
aspect-ratio: inherit;
}
a {
@@ -4536,17 +4537,22 @@
&.more {
overflow: visible;
width: 32rem;
height: 19.4rem;
padding: 2.4rem 2rem;
// width: 32rem;
// height: 19.4rem;
width: 100%;
// height: vw(194);
aspect-ratio: 320 / 194;
// padding: 2.4rem 2rem;
padding: vw(24) vw(20);
margin: 0;
background: url(../images/kia/pdp/display_theme_disney/box_more_m.png) no-repeat center / auto 100%;
border-radius: 2rem 0.8rem 2rem 0.8rem;
// border-radius: 2rem 0.8rem 2rem 0.8rem;
border-radius: vw(26) 0.8rem vw(26) 0.8rem;
box-shadow: 0px 0px 1rem 0px #0000001f;
@include tablet {
width: 61rem;
height: 40.5rem;
height: 41.4rem;
padding: 6.6rem 5.8rem;
margin: -1.8rem 0 0 0;
border-radius: 0;