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 디폴트는 모바일이 기준*/ /*css 디폴트는 모바일이 기준*/
/*반응형, 브라우저 크기가 300px 이하일때*/ /*반응형, 브라우저 크기가 300px 이하일때*/
@mixin mobileSmall { @mixin mobileSmall {
@media (max-width: $mobileSmall) { @media (max-width: $mobileSmall) {
@content; @content;
} }
} }
@mixin mobile { @mixin mobile {
@media (min-width: $mobile) { @media (min-width: $mobile) {
@content; @content;
} }
} }
@mixin maxmobile { @mixin maxmobile {
@media (max-width: $mobile) { @media (max-width: $mobile) {
@content; @content;
} }
} }
/*반응형, 브라우저 크기가 800px 이상일때*/ /*반응형, 브라우저 크기가 800px 이상일때*/
/*@media (min-width: $mobile ) and (max-width: $tablet){*/ /*@media (min-width: $mobile ) and (max-width: $tablet){*/
@mixin tablet { @mixin tablet {
@media (min-width: $tablet) { @media (min-width: $tablet) {
@content; @content;
} }
} }
@mixin maxtablet { @mixin maxtablet {
@media (max-width: $tablet) { @media (max-width: $tablet) {
@content; @content;
} }
} }
@mixin maxdesktop { @mixin maxdesktop {
@media (max-width: $desktopMin) { @media (max-width: $desktopMin) {
@content; @content;
} }
} }
/*반응형, 브라우저 크기가 1025px 이상일때*/ /*반응형, 브라우저 크기가 1025px 이상일때*/
@mixin desktopMin { @mixin desktopMin {
@media (min-width: $desktopMin) { @media (min-width: $desktopMin) {
@content; @content;
} }
} }
/*반응형, 브라우저 크기가 1204px 이상일때*/ /*반응형, 브라우저 크기가 1204px 이상일때*/
@mixin desktopMax { @mixin desktopMax {
@media (min-width: $desktopMax) { @media (min-width: $desktopMax) {
@content; @content;
} }
} }
/*넓이, 높이 자동 계산함수*/ /*넓이, 높이 자동 계산함수*/
@mixin square($size) { @mixin square($size) {
$calculated: 32px * $size; $calculated: 32px * $size;
width: $calculated; width: $calculated;
height: $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 { .displayThemeDesney .available-theme .list {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 0.6rem; padding: 0.6rem 2rem 5.6rem;
padding-bottom: 5.6rem;
} }
@media (min-width: 501px) { @media (min-width: 501px) {
.displayThemeDesney .available-theme .list { .displayThemeDesney .available-theme .list {
max-width: 64rem;
margin: 0 auto; margin: 0 auto;
} }
} }
@@ -3913,20 +3911,20 @@
.displayThemeDesney .available-theme .list ul { .displayThemeDesney .available-theme .list ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: space-between;
gap: 5.6rem 0.8rem; width: 100%;
gap: 5.6rem 0;
} }
@media (min-width: 1025px) { @media (min-width: 768px) {
.displayThemeDesney .available-theme .list ul { .displayThemeDesney .available-theme .list ul {
flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 2.4rem; gap: 2.4rem;
} }
} }
.displayThemeDesney .available-theme .list ul li { .displayThemeDesney .available-theme .list ul li {
overflow: hidden; overflow: hidden;
width: 15.6rem; width: calc(50% - 0.4rem);
min-height: 19.6rem; aspect-ratio: 156/196;
background-color: #fff; background-color: #fff;
border-radius: 0.8rem; border-radius: 0.8rem;
box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.12);
@@ -3936,6 +3934,7 @@
.displayThemeDesney .available-theme .list ul li { .displayThemeDesney .available-theme .list ul li {
width: 28.2rem; width: 28.2rem;
height: 36.9rem; height: 36.9rem;
aspect-ratio: inherit;
} }
} }
.displayThemeDesney .available-theme .list ul li a { .displayThemeDesney .available-theme .list ul li a {
@@ -3988,18 +3987,18 @@
} }
.displayThemeDesney .available-theme .list ul li.more { .displayThemeDesney .available-theme .list ul li.more {
overflow: visible; overflow: visible;
width: 32rem; width: 100%;
height: 19.4rem; aspect-ratio: 320/194;
padding: 2.4rem 2rem; padding: 6.6666666667vw 5.5555555556vw;
margin: 0; margin: 0;
background: url(../images/kia/pdp/display_theme_disney/box_more_m.png) no-repeat center/auto 100%; 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); box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.1215686275);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.displayThemeDesney .available-theme .list ul li.more { .displayThemeDesney .available-theme .list ul li.more {
width: 61rem; width: 61rem;
height: 40.5rem; height: 41.4rem;
padding: 6.6rem 5.8rem; padding: 6.6rem 5.8rem;
margin: -1.8rem 0 0 0; margin: -1.8rem 0 0 0;
border-radius: 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 { .list {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 0.6rem; padding: 0.6rem 2rem 5.6rem;
padding-bottom: 5.6rem;
@include mobile { @include mobile {
max-width: 64rem;
margin: 0 auto; margin: 0 auto;
} }
@@ -4461,19 +4459,21 @@
ul { ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: space-between;
gap: 5.6rem 0.8rem; width: 100%;
gap: 5.6rem 0;
@include desktopMin { @include tablet {
flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 2.4rem; gap: 2.4rem;
} }
li { li {
overflow: hidden; overflow: hidden;
width: 15.6rem; // width: 15.6rem;
min-height: 19.6rem; // min-height: 19.6rem;
width: calc(50% - 0.4rem);
// min-height: vw(196);
aspect-ratio: 156 / 196;
background-color: #fff; background-color: #fff;
border-radius: 0.8rem; border-radius: 0.8rem;
box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.12);
@@ -4482,6 +4482,7 @@
@include tablet { @include tablet {
width: 28.2rem; width: 28.2rem;
height: 36.9rem; height: 36.9rem;
aspect-ratio: inherit;
} }
a { a {
@@ -4536,17 +4537,22 @@
&.more { &.more {
overflow: visible; overflow: visible;
width: 32rem; // width: 32rem;
height: 19.4rem; // height: 19.4rem;
padding: 2.4rem 2rem; width: 100%;
// height: vw(194);
aspect-ratio: 320 / 194;
// padding: 2.4rem 2rem;
padding: vw(24) vw(20);
margin: 0; margin: 0;
background: url(../images/kia/pdp/display_theme_disney/box_more_m.png) no-repeat center / auto 100%; 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; box-shadow: 0px 0px 1rem 0px #0000001f;
@include tablet { @include tablet {
width: 61rem; width: 61rem;
height: 40.5rem; height: 41.4rem;
padding: 6.6rem 5.8rem; padding: 6.6rem 5.8rem;
margin: -1.8rem 0 0 0; margin: -1.8rem 0 0 0;
border-radius: 0; border-radius: 0;

BIN
kr/assets/images/kia/contents/imgCaseInfo.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 185 KiB

After

Width:  |  Height:  |  Size: 180 KiB

BIN
kr/assets/images/kia/pdp/display_theme_disney/Theme_screen.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1009 KiB

After

Width:  |  Height:  |  Size: 1011 KiB

BIN
kr/assets/images/kia/pdp/display_theme_disney/Theme_screen_m.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 335 KiB

After

Width:  |  Height:  |  Size: 338 KiB

2
kr/product/pdp_display_theme_disney.html
View File

@@ -34,7 +34,7 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v2"></script> <script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v2"></script>
<!--상품상세 페이지 css 분리--> <!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" /> <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v81553" type="text/css" /> <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v81553123" type="text/css" />
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" /> <link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" /> <link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" /> <link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" />