针对这个Vue项目进行响应式
布局调整，主要目标是让页面在不同设备上都能自适应显示：<template>
<div class="family">
<!
-- 顶部导航栏
-->
<NavBar />
<!
-- 首页内容区域
-->
<div class="content
-banner">
<hotel
-reservation class="hotel
-reservation"></hotel
-reservation>
</div>
<div class="banner
-text">
<p class="text" :class="{ textEn: $i18n.locale === &#
39;en&#
39; }">{{ $t
(&#
39;Family&#
39;
) }}</p>
<!
-- <span class="top1" >Wedding Banquet & Conference</span>
-->
</div>
<div class="content
-wrapper">
<div class="title
-box">
<p class="title
-zh" :class="{ textEn: $i18n.locale === &#
39;en&#
39; }">{{ $t
(&#
39;trip2&#
39;
) }}</p>
</div>
<!
-- 一起脉动
-->
<div class="content
-box">
<div class="text
-box">
<p class="content margin
-bottom
-20" :class="{ textEn: $i18n.locale === &#
39;en&#
39; }">
{{ $t
(&#
39;text28&#
39;
) }}
</p>
<p class="more":class="{ textEn: $i18n.locale === &#
39;en&#
39; }">{{ $t
(&#
39;more7&#
39;
) }}</p>
</div>
<div class="img
-box">
<img src="@/assets/wedding/cup.png" alt="" />
</div>
</div>
<!
-- 专业策划
-->
<div class="content
-box">
<div class="img
-box">
<img src="@/assets/wedding/table.png" alt="" />
</div>
<div class="text
-box">
<p class="title
-zh text
-center" :class="{ textEn: $i18n.locale === &#
39;en&#
39; }">{{ $t
(&#
39;Professional&#
39;
) }}</p>
<p class="content margin
-top
-20" :class="{ textEn: $i18n.locale === &#
39;en&#
39; }">
{{ $t
(&#
39;text20&#
39;
) }}
</p>
<p class="content">
</p>
<p class="more div
-center" :class="{ textEn: $i18n.locale === &#
39;en&#
39; }">{{$t
(&#
39;more8&#
39;
)}}</p>
</div>
</div>
<!
-- 婚宴进行中
-->
<div class="content
-box">
<div class="text
-box">
<p class="title
-zh text
-center" :class="{ textEn: $i18n.locale === &#
39;en&#
39; }">{{ $t
(&#
39;progress&#
39;
) }}</p>
<p class="content margin
-top
-20" :class="{ textEn: $i18n.locale === &#
39;en&#
39; }">
{{ $t
(&#
39;text21&#
39;
) }}
</p>
<p class="more div
-center" :class="{ textEn: $i18n.locale === &#
39;en&#
39; }">{{ $t
(&#
39;more9&#
39;
) }}</p>
</div>
<div class="img
-box">
<img src="@/assets/wedding/flower.png" alt="" />
</div>
</div>
</div>
<!
-- 底部导航栏
-->
<Footer />
</div>
</template>
<script>
export default {
name: "family",
data
() {
return {
};
},
};
</script>
<style scoped>
.content
-banner {
width: 100vw;
height: 62rem;
margin: 0 auto;
background
-image: url
("@/assets/wedding/flower.png"
);
background
-size: 100% 100%;
position: relative;
}
.hotel
-reservation {
width: 120rem;
height: 12rem;
margin: 0 auto;
position: relative;
top: 45rem;
}
.content
-wrapper {
width: 120rem;
margin: 0 auto;
}
.title
-box {
text
-align: center;
margin: 6rem 0;
}
.content
-box {
display:
flex;
justify
-content: space
-between;
margin
-bottom: 10rem;
}
.title
-en{
font
-size:
3rem;
font
-weight: bold;
line
-height: 2em;
font
-family: "Times New Roman", Times, serif;
}
.textEn {
font
-family: "Times New Roman", Times, serif !important;
}
.banner
-text {
position: absolute;
top: 10rem;
left: 20%;
padding: 1rem 24rem;
font
-size:
3.2rem;
line
-height: 2em;
font
-weight: bold;
color: #fff;
text
-align: center;
background
-color: rgba
(1, 1, 1 1.5
);
}
.text {
margin
-top: 2rem;
font
-family: "FangSong";
font
-size: 10rem;
line
-height: 2em;
text
-align: left;
padding: 0 4rem;
text
-align: justify;
-webkit-text
-justify: inter
-word;
text
-justify: inter
-word;
}
.top1{
font
-family: "Times New Roman", Times, serif;
font
-size: 6rem;
font
-weight: bold;
}
.title
-zh {
font
-size: 4.6rem;
/* font
-weight: bold; */
color: rgb
(202, 171, 98
);
text
-align: left;
}
.content {
width: 60rem;
font
-size: 2rem;
line
-height: 2;
font
-family: "Fangsong";
text
-align: justify;
}
.img
-box img {
width: 50rem;
height:
30rem;
}
.more {
width: 15rem;
font
-size: 2rem;
line
-height: 2em;
color: rgb
(202, 171, 98
);
text
-align: center;
cursor: pointer;
background
-color: rgb
(2
38, 2
35, 2
35
);
}
.text
-box{
text
-align: left;
}
/* 通用属性 */
/* 文本居中 */
.text
-center {
text
-align: left;
}
/* div居中 */
.div
-center {
margin: 5rem auto;
text
-align: center;
}
/* 上外边距2rem */
.margin
-top
-20 {
margin
-top: 2rem;
}
/* 下外边距2rem */
.margin
-bottom
-20 {
margin
-bottom: 2rem;
}
/* 页面修改区域 */
/* 响应式调整 */
@media screen and
(max
-width: 1024px
) {
.content
-banner {
height: 70rem;
}
.hotel
-reservation {
width: 160rem;
top: 54rem;
}
.content
-wrapper {
width: 160rem;
}
.title
-en {
font
-size: 4.8rem;
}
.title
-zh {
font
-size: 5.6rem;
}
.content {
width: 74rem;
font
-size:
3rem;
}
.img
-box{
width: 54rem;
height: 42rem;
}
.img
-box img {
width: 54rem;
height: 42rem;
}
.more {
width: 20rem;
font
-size: 2.4rem;
}
}
@media screen and
(max
-width: 768px
) {
.content
-banner {
height: 82rem;
background
-image: url
("@/assets/wedding/flower.png"
);
}
.hotel
-reservation {
width: 160rem;
top: 66rem;
}
.content
-wrapper {
width: 160rem;
}
.content
-box {
flex-direction: column;
}
.img
-box {
order: 2;
}
.img
-box img {
width: 100rem;
height: auto;
}
.text
-box {
order: 1;
}
.title
-en {
font
-size: 6rem;
}
.title
-zh {
font
-size: 6.2rem;
}
.content {
width: 160rem;
font
-size: 4rem;
}
.img
-box {
width: 160rem;
height: 90rem;
}
.more {
width:
30rem;
font
-size:
3.2rem;
margin
-bottom: 5rem;
margin
-left: 1
30rem;
}
}
</style>
本文深入解析Flex布局的基础概念，包括容器、项目、主轴与侧轴的定义，以及如何通过属性控制布局方向、排列方式和空间分配。同时，对比了新旧版本属性的区别，帮助读者掌握Flex布局的精髓。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
