请将该vue项目中的响应式布局调整为可以自适应各个打开端屏幕大小尺寸的方法：<template>
<!
-- 体验页面
-->
<
div class
="experience">
<!
-- 顶部导航栏
-->
<NavBar />
<
div class
="container">
<!
-- 首图内容区域
-->
<
div class
="content
-banner"></
div>
<
div class
="content
-wrapper">
<!
-- 商务之旅
-->
<
div class
="business margin
-top
-5
0">
<
div class
="
img-box">
<responsive
-image
class
="hd
01"
:small
-image
="hd
01.smallImage1"
:medium
-image
="hd
01.mediumImage1"
:large
-image
="hd
01.largeImage1"
alt
-text
="Description of image"
/>
<!
-- <
img src
="../../assets/experience/hd
-01.png" alt
="" />
-->
</
div>
<
div class
="text
-box">
<p class
="title
-zh text
-center"
:class
="{ textEn
: $i18n.locale
=== 'en' }"> {{ $t('Business') }}</p>
<p class
="content margin
-top
-2
0"
:class
="{ textEn
: $i18n.locale
=== 'en' }">
{{ $t('text7') }}
</p>
<p class
="more"
:class
="{ textEn
: $i18n.locale
=== 'en' }">
{{ $t("more14") }}
</p>
</
div>
</
div>
<!
-- 旅游度假
-->
<
div class
="tourism margin
-top
-5
0">
<
div class
="text
-box">
<p class
="title
-zh text
-center"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('trip') }}</p>
<p class
="content margin
-top
-2
0"
:class
="{ textEn
: $i18n.locale
=== 'en' }">
{{ $t('text8') }}
</p>
<p class
="more"
:class
="{ textEn
: $i18n.locale
=== 'en' }">
{{ $t("more15") }}
</p>
</
div>
<
div class
="
img-box">
<responsive
-image
class
="hd
02"
:small
-image
="hd
02.smallImage2"
:medium
-image
="hd
02.mediumImage2"
:large
-image
="hd
02.largeImage2"
alt
-text
="Description of image"
/>
<!
-- <
img src
="../../assets/experience/hd
-02.png" alt
="" />
-->
</
div>
</
div>
</
div>
<!
-- 查看客房
-->
<
div class
="content
-swiper">
<
div class
="content
-kefang">
<p class
="title
-zh text
-center"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('Guest') }}</p>
<!
-- 轮播图
-->
<
div class
="foot
-swiper
-box margin
-top
-5
0">
<RoomSwiper
:bannerList
="roomBannerList" />
</
div>
</
div>
<
div class
="content
-kefang">
<p class
="title
-zh text
-center"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('Apartment') }}</p>
<!
-- 轮播图
-->
<
div class
="foot
-swiper
-box margin
-top
-5
0">
<RoomSwiper
:bannerList
="apartBannerList" />
</
div>
</
div>
<
div class
="device">
<p class
="title
-zh text
-center"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('Facilities') }}</p>
<
div class
="device
-content margin
-top
-5
0">
<
div class
="
img-box">
<
img src
="../../assets/experience/hd
-01.png" alt
="" />
</
div>
<
div class
="text
-box">
<ul class
="device
-list">
<li class
="text"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('WiFi') }}</li>
<li class
="text"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('in
dividually') }}</li>
<li class
="text"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('TV') }}</li>
<li class
="text"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('laundry') }}</li>
<li class
="text"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('safes') }}</li>
<li class
="text"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('coffee') }}</li>
<li class
="text"
:class
="{ textEn
: $i18n.locale
=== 'en' }">{{ $t('Minibar') }}</li>
</ul>
</
div>
</
div>
</
div>
</
div>
</
div>
<!
-- 滚动宣传图文本页面
-->
<!
-- <
div v
-for
="item in roomBannerList"
:key
="item.id">
<h2>{{ $t(item.titleKey) }}</h2>
<p>{{ $t(item.promptKey) }}</p>
</
div>
-->
<!
-- 底部导航栏
-->
<Footer />
</
div>
</template>
<script>
import RoomSwiper from "@/components/swiper/RoomSwiper.vue";
export default {
name
: "experience",
components
: {
RoomSwiper,
},
data() {
return {
msg
: "Welcome to Your Vue.js App",
// 响应式图片数据
hd
01
: {
smallImage1
: require("../../assets/experience/hd
-01
-mobile.jpg"),
mediumImage1
: require("../../assets/experience/hd
-01.png"),
largeImage1
: require("../../assets/experience/hd
-01.png"),
},
hd
02
: {
smallImage2
: require("../../assets/experience/hd
-02
-mobile.jpg"),
mediumImage2
: require("../../assets/experience/hd
-02.png"),
largeImage2
: require("../../assets/experience/hd
-02.png"),
},
roomBannerList
: [
{
id
: 1,
imgUrl
: require("../../assets/room/room
-01.png"),
title
: "豪华套房",
prompt
: "尊享私人空间，尽享奢华体验",
},
{
id
: 2,
imgUrl
: require("../../assets/room/room
-02.png"),
title
: "豪华楼层/豪华雅致大床房",
prompt
:
"面积约为42平方米，装饰现代，舒适典雅。卧室和大理石浴室设气派的落地窗玻璃，可以俯瞰草原城市胜景或乌兰木伦湖滨美景。",
},
{
id
: 3,
imgUrl
: require("../../assets/room/room
-03.png"),
title
: "豪华双床房",
prompt
:
"面积约为42平方米，装饰现代，舒适典雅。卧室和大理石浴室设气派的落地窗玻璃，可以俯瞰草原城市胜景或乌兰木伦湖滨美景。",
},
],
apartBannerList
: [
{
id
: 1,
imgUrl
: require("../../assets/room/room
-01.png"),
title
: "豪华套房",
prompt
: "尊享私人空间，尽享奢华体验",
},
{
id
: 2,
imgUrl
: require("../../assets/room/room
-02.png"),
title
: "豪华楼层/豪华雅致大床房",
prompt
:
"面积约为42平方米，装饰现代，舒适典雅。卧室和大理石浴室设气派的落地窗玻璃，可以俯瞰草原城市胜景或乌兰木伦湖滨美景。",
},
{
id
: 3,
imgUrl
: require("../../assets/room/room
-03.png"),
title
: "豪华双床房",
prompt
:
"面积约为42平方米，装饰现代，舒适典雅。卧室和大理石浴室设气派的落地窗玻璃，可以俯瞰草原城市胜景或乌兰木伦湖滨美景。",
},
],
};
},
};
</script>
<
style scoped>
.content
-banner {
width
: 1
00vw;
height: 6
0rem;
background
-image
: url("../../assets/banner/banner
-04.jpg");
background
-size
: 1
00% 1
00%;
position
: relative;
}
.content
-wrapper {
max
-width
: 192
0px; /* 限制最大宽度 */
margin
: 0 auto;
padding
: 0 4rem; /* 添加基础内边距 */
}
/* 优化商务/度假模块 */
.business,
.tourism {
display
: grid;
grid
-template
-columns
: 1fr 1fr;
gap
: 6rem;
align
-items
: center;
padding
: 8rem
0;
max
-width
: 16
00px; /* 限制最大内容宽度 */
}
.title
-en {
font
-size
: 3rem;
color
: rgb(2
02, 171, 98);
font
-weight
: bold;
line-height: 2em;
font
-family
: "Times New Roman", Times, serif;
}
.title
-zh {
font
-size
: 3.6rem;
color
: rgb(2
02, 171, 98);
text
-align
: left;
}
.content {
font
-size
: clamp(1.6rem, 2vw, 2.2rem); /* 响应式字体 */
line-height: 1.8;
margin
: 3rem
0;
font
-family
: "Fangsong";
}
/* 图片容器优化 */
.
img-box {
width
: 1
00%;
max
-width
: 8
00px; /* 限制最大宽度 */
margin
: 0 auto;
transition
: transform
0.3s;
}
.
img-box
:hover {
transform
: scale(1.
02); /* 添加悬停效果 */
}
/* 文本区域优化 */
.text
-box {
max
-width
: 6
00px;
margin
: 0 auto;
}
.more {
width
: 1
0rem;
font
-size
: 1.6rem;
line-height: 2em;
color
: rgb(2
02, 171, 98);
text
-align
: center;
cursor
: pointer;
background
-color
: rgb(238, 235, 235);
}
/* 通用属性 */
/* 文本居中 */
.text
-center {
text
-align
: center;
}
/*
div居中 */
.
div-center {
margin
: 2rem auto;
}
/* 上外边距2rem */
.margin
-top
-2
0 {
margin
-top
: 2rem;
}
/* 上外边距5rem */
.margin
-top
-5
0 {
margin
-top
: 5rem;
}
/* 下外边距2rem */
.margin
-bottom
-2
0 {
margin
-bottom
: 2rem;
}
/* 度假旅行 */
/* .tourism {
width
: 12
0rem;
margin
: 0 auto;
display
: flex;
justify
-content
: space
-between;
margin
-bottom
: 1
0rem;
} */
/* 查看客房 */
.content
-kefang {
width
: 1
00vw;
height: 75rem;
}
/* 客房设施 */
.device
-content {
display
: grid;
grid
-template
-columns
: 1fr 1fr;
gap
: 8rem;
max
-width
: 14
00px;
margin
: 8rem auto;
align
-items
: center;
}
.device
-list {
columns
: 2; /* 增加列数 */
column
-gap
: 4rem;
font
-size
: clamp(1.6rem, 1.8vw, 2rem);
}
.device {
width
: 1
00rem;
margin
: 0 auto;
display
: flex;
flex
-direction
: column;
align
-items
: center;
justify
-content
: center;
margin
-bottom
: 1
0rem;
}
.textEn {
font
-family
: "Times New Roman", Times, serif !important;
}
/* 新增响应式断点 */
@media screen and (min
-width
: 1
025px) {
.content
-banner {
height: 5
0vh;
}
.business,
.tourism {
grid
-template
-columns
: 55% 45%; /* 调整比例 */
}
}
/* 1
024px以下 */
@media screen and (max
-width
: 1
024px) {
.content
-banner {
height: 7
0rem;
}
.business,
.tourism {
grid
-template
-columns
: 1fr;
gap
: 4rem;
padding
: 4rem
0;
}
.content
-wrapper {
width
: 16
0rem;
}
.title
-en {
font
-size
: 4.8rem;
}
.title
-zh {
font
-size
: 5.6rem;
}
.content {
width
: 74rem;
font
-size
: 3rem;
}
.
img-box {
max
-width
: 1
00%;
height: auto;
}
.more {
width
: 15rem;
font
-size
: 2rem;
}
.device
-content {
grid
-template
-columns
: 1fr;
gap
: 4rem;
}
/* .device
-content {
width
: 1
00rem;
margin
: 1
0rem auto;
display
: flex;
margin
-bottom
: 1rem;
} */
.device
-list {
columns
: 1;
}
.device {
width
: 1
00rem;
margin
: 0 auto;
display
: flex;
flex
-direction
: column;
align
-items
: center;
justify
-content
: center;
margin
-bottom
: 1
0rem;
}
}
@media screen and (max
-width
: 768px) {
.content
-banner {
height: 82rem;
background
-image
: url("../../assets/banner/banner
-04
-mobile.jpg");
}
.business {
flex
-direction
: column;
align
-items
: center;
}
.tourism {
flex
-direction
: column;
align
-items
: center;
}
.content
-wrapper {
padding
: 0 2rem;
}
.
img-box {
order
: 2;
}
.text
-box {
order
: 1;
}
.title
-en {
font
-size
: 6rem;
}
.title
-zh {
font
-size
: 6.2rem;
}
.content {
font
-size
: 1.8rem;
}
.
img-box {
width
: 11
0rem;
height: 6
0rem;
margin
-top
: 5rem;
margin
-bottom
: 2rem;
}
.more {
width
: 2
0rem;
font
-size
: 2.4rem;
margin
-bottom
: 5rem;
margin
-left
: 8
0rem;
}
.device
-content {
width
: 12
0rem;
margin
: 1
0rem auto;
display
: flex;
margin
-bottom
: 1rem;
flex
-direction
: row;
margin
-right
: 1
0rem;
}
.device
-list {
font
-size
: 1.6rem;
}
.device {
width
: 15
0rem;
margin
: 0 auto;
display
: flex;
flex
-direction
: column;
align
-items
: center;
justify
-content
: center;
margin
-bottom
: 1
0rem;
margin
-right
: 1
0rem;
}
}
</
style>
本文介绍了两种解决图片在div中垂直居中的方法：一种是通过将img元素的display属性设置为block；另一种是在外层div上设置line-height为0（此方法不适用于IE6和IE7）。这两种方法各有优缺点，适用于不同的浏览器环境。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
