针对这个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 === 'en' }">{{ $t('Family') }}</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 === 'en' }">{{ $t('trip2') }}</p>
</div>
<!
-- 一起脉动
-->
<div class="content
-box">
<div class="
text-box">
<p class="content margin
-bottom
-20"
:class="{
textEn
: $i18n.locale === 'en' }">
{{ $t('
text28') }}
</p>
<p class="more"
:class="{
textEn
: $i18n.locale === 'en' }">{{ $t('more7') }}</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 === 'en' }">{{ $t('Professional') }}</p>
<p class="content margin
-top
-20"
:class="{
textEn
: $i18n.locale === 'en' }">
{{ $t('
text20') }}
</p>
<p class="content">
</p>
<p class="more div
-center"
:class="{
textEn
: $i18n.locale === 'en' }">{{$t('more8')}}</p>
</div>
</div>
<!
-- 婚宴进行中
-->
<div class="content
-box">
<div class="
text-box">
<p class="title
-zh
text-center"
:class="{
textEn
: $i18n.locale === 'en' }">{{ $t('progress') }}</p>
<p class="content margin
-top
-20"
:class="{
textEn
: $i18n.locale === 'en' }">
{{ $t('
text21') }}
</p>
<p class="more div
-center"
:class="{
textEn
: $i18n.locale === 'en' }">{{ $t('more9') }}</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(238, 235, 235);
}
.
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
: 130rem;
}
}
</style>
本文探讨了CSS中text-align-last属性的使用限制，特别是其对最后一行文本不生效的问题，并提供了解决方案，通过巧妙地添加额外内容来实现文本的完全居中。
扫一扫
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
