请将该vue项目中的响应式布局调整为可以自适应各个打开端屏幕大小尺寸的方法：<t
emplate>
<!-- 体验页面 -->
<div class="experience">
<!-- 顶部导航栏 -->
<NavBar />
<div class="container">
<!-- 首图内容区域 -->
<div class="content-banner"></div>
<div class="content-wrapper">
<!-- 商务之旅 -->
<div class="business margin-top-50">
<div class="img-box">
<responsive-image
class="hd01"
:small-image="hd01.smallImage1"
:medium-image="hd01.mediumImage1"
:large-image="hd01.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-20" :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-50">
<div class="text-box">
<p class="title-zh text-center" :class="{ textEn: $i18n.locale === 'en' }">{{ $t('trip') }}</p>
<p class="content margin-top-20" :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="hd02"
:small-image="hd02.smallImage2"
:medium-image="hd02.mediumImage2"
:large-image="hd02.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-50">
<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-50">
<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-50">
<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('individually') }}</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="it
em in roomBannerList" :key="it
em.id">
<h2>{{ $t(it
em.titleKey) }}</h2>
<p>{{ $t(it
em.promptKey) }}</p>
</div> -->
<!-- 底部导航栏 -->
<Footer />
</div>
</t
emplate>
<script>
import RoomSwiper
from "@/components/swiper/RoomSwiper.vue";
export default {
name: "experience",
components: {
RoomSwiper,
},
data() {
return {
msg: "Welcome to Your Vue.js App",
// 响应式图片数据
hd01: {
smallImage1: require("../../assets/experience/hd-01-mobile.jpg"),
mediumImage1: require("../../assets/experience/hd-01.png"),
largeImage1: require("../../assets/experience/hd-01.png"),
},
hd02: {
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: 100vw;
height: 60
rem;
background-image: url("../../assets/banner/banner-04.jpg");
background-size: 100% 100%;
position: relative;
}
.content-wrapper {
max-width: 1920
px; /* 限制最大宽度 */
margin: 0 auto;
padding: 0 4
rem; /* 添加基础内边距 */
}
/* 优化商务/度假模块 */
.business,
.tourism {
display: grid;
grid-t
emplate-columns: 1
fr 1
fr;
gap: 6
rem;
align-it
ems: center;
padding: 8
rem 0;
max-width: 1600
px; /* 限制最大内容宽度 */
}
.title-en {
font-size: 3
rem;
color: rgb(202, 171, 98);
font-weight: bold;
line-height: 2
em;
font-family: "Times New Roman", Times, serif;
}
.title-zh {
font-size: 3.6
rem;
color: rgb(202, 171, 98);
text-align: left;
}
.content {
font-size: clamp(1.6
rem, 2vw, 2.2
rem); /* 响应式字体 */
line-height: 1.8;
margin: 3
rem 0;
font-family: "Fangsong";
}
/* 图片容器优化 */
.img-box {
width: 100%;
max-width: 800
px; /* 限制最大宽度 */
margin: 0 auto;
transition: transform 0.3s;
}
.img-box:hover {
transform: scale(1.02); /* 添加悬停效果 */
}
/* 文本区域优化 */
.text-box {
max-width: 600
px;
margin: 0 auto;
}
.more {
width: 10
rem;
font-size: 1.6
rem;
line-height: 2
em;
color: rgb(202, 171, 98);
text-align: center;
cursor: pointer;
background-color: rgb(238, 235, 235);
}
/* 通用属性 */
/* 文本居中 */
.text-center {
text-align: center;
}
/* div居中 */
.div-center {
margin: 2
rem auto;
}
/* 上外边距2
rem */
.margin-top-20 {
margin-top: 2
rem;
}
/* 上外边距5
rem */
.margin-top-50 {
margin-top: 5
rem;
}
/* 下外边距2
rem */
.margin-bottom-20 {
margin-bottom: 2
rem;
}
/* 度假旅行 */
/* .tourism {
width: 120
rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
margin-bottom: 10
rem;
} */
/* 查看客房 */
.content-kefang {
width: 100vw;
height: 75
rem;
}
/* 客房设施 */
.device-content {
display: grid;
grid-t
emplate-columns: 1
fr 1
fr;
gap: 8
rem;
max-width: 1400
px;
margin: 8
rem auto;
align-it
ems: center;
}
.device-list {
columns: 2; /* 增加列数 */
column-gap: 4
rem;
font-size: clamp(1.6
rem, 1.8vw, 2
rem);
}
.device {
width: 100
rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-it
ems: center;
justify-content: center;
margin-bottom: 10
rem;
}
.textEn {
font-family: "Times New Roman", Times, serif !important;
}
/* 新增响应式断点 */
@media screen and (min-width: 1025
px) {
.content-banner {
height: 50vh;
}
.business,
.tourism {
grid-t
emplate-columns: 55% 45%; /* 调整比例 */
}
}
/* 1024
px以下 */
@media screen and (max-width: 1024
px) {
.content-banner {
height: 70
rem;
}
.business,
.tourism {
grid-t
emplate-columns: 1
fr;
gap: 4
rem;
padding: 4
rem 0;
}
.content-wrapper {
width: 160
rem;
}
.title-en {
font-size: 4.8
rem;
}
.title-zh {
font-size: 5.6
rem;
}
.content {
width: 74
rem;
font-size: 3
rem;
}
.img-box {
max-width: 100%;
height: auto;
}
.more {
width: 15
rem;
font-size: 2
rem;
}
.device-content {
grid-t
emplate-columns: 1
fr;
gap: 4
rem;
}
/* .device-content {
width: 100
rem;
margin: 10
rem auto;
display: flex;
margin-bottom: 1
rem;
} */
.device-list {
columns: 1;
}
.device {
width: 100
rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-it
ems: center;
justify-content: center;
margin-bottom: 10
rem;
}
}
@media screen and (max-width: 768
px) {
.content-banner {
height: 82
rem;
background-image: url("../../assets/banner/banner-04-mobile.jpg");
}
.business {
flex-direction: column;
align-it
ems: center;
}
.tourism {
flex-direction: column;
align-it
ems: center;
}
.content-wrapper {
padding: 0 2
rem;
}
.img-box {
order: 2;
}
.text-box {
order: 1;
}
.title-en {
font-size: 6
rem;
}
.title-zh {
font-size: 6.2
rem;
}
.content {
font-size: 1.8
rem;
}
.img-box {
width: 110
rem;
height: 60
rem;
margin-top: 5
rem;
margin-bottom: 2
rem;
}
.more {
width: 20
rem;
font-size: 2.4
rem;
margin-bottom: 5
rem;
margin-left: 80
rem;
}
.device-content {
width: 120
rem;
margin: 10
rem auto;
display: flex;
margin-bottom: 1
rem;
flex-direction: row;
margin-right: 10
rem;
}
.device-list {
font-size: 1.6
rem;
}
.device {
width: 150
rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-it
ems: center;
justify-content: center;
margin-bottom: 10
rem;
margin-right: 10
rem;
}
}
</style>
本文详细解析了CSS中的四种单位：px像素、fr自适应单位、em相对长度单位和rem单位。探讨了它们的特点、应用场景及相互之间的区别，尤其强调了rem单位在网页布局中的优势。
扫一扫
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
