文本大小调整取决于副本的数量

Question

我对我目前在媒体查询中处理的一段代码有一种奇怪的行为。 我使用相同的div类来设置出现在网站内各个页面上的文本样式，但文本显示的大小不同，具体取决于是否有1行，2行或更多行。

有问题的div类是.credits_mobile

HTML

<div id="project_content_mobile">
<div class="project_title_mobile">
Spaces
</div>
<div class="project_description_mobile">
A fashion editorial based around the quote ‘There is no difference between time and any of the three dimensions of space except that our consciousness moves along it’ H.G.Wells The Time Machine (p.374,2001.) Through the use of mirrors and reflections the aim was to create new spaces and perspectives that play with what the eye sees and takes influence from the cubist movement. 
    </div>
<div class="credits_mobile">
MUA: Meg Purnell<br> 
Models: Yasmin Minto, Lenka Slípková
</div>
<img src="images/projects/spaces/1_mobile.jpg"/>
<img src="images/projects/spaces/2_mobile.jpg"/>
<img src="images/projects/spaces/3_mobile.jpg"/>
<img src="images/projects/spaces/4_mobile.jpg"/>
<img src="images/projects/spaces/5_mobile.jpg"/>
<img src="images/projects/spaces/6_mobile.jpg"/>
</div>

链接的CSS文件1 - 布局

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
body {    
    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
    height: 100%;
}

#homepage_portrait_image{
    position:absolute;
    width: 76%;
    height: 80%;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -100;
}

#homepage_portrait_image img{
    position:absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -100;
}

/***********
Nav
************/

#nav_top_background{
    position:fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 8%;
    background-color: white;
    z-index: 100;
}

#nav_top_content{
    position:fixed;
    top: 2.5%;
    left: 3%;
    width: 45%;
    z-index: 200;
}

#nav_top_content img{
    width: 100%;
}

#nav_bottom_background{
    position:fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 8%;
    background-color: white;
    z-index: 100;
}

#nav_bottom_content{
    position:fixed;
    bottom: 2.5%;
    right: 3%;
    width: 25.5%;
    z-index: 200;
}

#nav_bottom_content img{
    width: 100%;
}

#nav_left_background{
    position:fixed;
    top: 0%;
    left: 0%;
    width: 12%;
    height: 100%;
    background-color: white;
    z-index: 100;
}

#nav_left_content{
    position:fixed;
    bottom: 2.5%;
    left: 3%;
    width: 6%;
    z-index: 200;
}

#nav_left_content img{
    width: 100%;
}

#nav_right_background{
    position:fixed;
    top: 0%;
    right: 0%;
    width: 12%;
    height: 100%;
    background-color: white;
    z-index: 100;
}

#nav_right_content{
    position:fixed;
    top: 2.5%;
    right: 3%;
    width: 6%;
    z-index: 200;
}

#nav_right_content img{
    width: 100%;
}


/***********
Work
************/

#mobile_image_grid{
    visibility: visible;
    display:block;
    position: absolute;
    top: 8%;
    left: 12%;
    width: 76%; 
}

#mobile_image_grid img{
    width: 100%;    
}

.project_title_work_mobile{
    visibility: visible;
    display:block;
    position:relative;
    margin-top: 2%;
    margin-bottom: 6%;
    text-decoration: none;
}

/********** Hidden ************/
#image_grid,
#image_content,
#video_content,
#typographic_content,
#nav_left_background,
#nav_right_background,
#mobile_image_grid_landscape{
    visibility: hidden;
    display: none;
}
/********** Hidden ************/



/***********
About, Contact, & Project Intros
************/

#typographic_content_mobile{
    visibility:visible;
    display:block;
    position:absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 76%;
    height: auto;
    z-index: 0;
}

/***********
Project
************/

#project_content_mobile{
    visibility: visible;
    display: block;
    position:absolute;
    top: 12%;
    left: 12%;
    width: 76%;
    height: auto;
    padding-bottom: 100px;
    z-index: -100;
}

#project_content_mobile img{
    position:relative;
    width: 100%;
    height: auto;
    padding-bottom: 60px;
    z-index: -100;
}


.project_title_mobile{
    visibility: visible;
    display: block;
    position:relative;
    width: 100%;
    height: auto;
    padding-bottom: 20px;
    z-index: -100;
}

.project_description_mobile{
    visibility: visible;
    display: block;
    position:relative;
    width: 100%;
    padding-bottom: 20px;
    z-index: -100;
}

.credits_mobile{
    visibility: visible;
    display: block;
    position:relative;
    width: 100%;
    padding-bottom: 100px;
    z-index: -100;
}

video{
    position:relative;
    display:inline-block;
    width: 100%;
    height: auto;
    z-index: -100;  
}

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
body {    
    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
    height: 100%;
}

#homepage_portrait_image{
    position:absolute;
    width: 76%;
    height: 80%;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -100;
}

#homepage_portrait_image img{
    position:absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -100;
}

/***********
Nav
************/

#nav_top_background{
    position:fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 11%;
    background-color: #fff;
    z-index: 100;
}

#nav_top_content{
    position:fixed;
    top: 3%;
    left: 1.5%;
    width: 27%;
    z-index: 200;
}

#nav_top_content img{
    width: 100%;
}

#nav_bottom_background{
    position:fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 11%;
    background-color: #fff;
    z-index: 100;
}

#nav_bottom_content{
    position:fixed;
    bottom: 3%;
    right: 1.5%;
    width: 16.2%;
    z-index: 200;
}

#nav_bottom_content img{
    width: 100%;
}

#nav_left_background{
    position:fixed;
    top: 0%;
    left: 0%;
    width: 12%;
    height: 100%;
    background-color: white;
    z-index: 100;
}

#nav_left_content{
    position:fixed;
    bottom: 3%;
    left: 1.5%;
    width: 3.6%;
    z-index: 200;
}

#nav_left_content img{
    width: 100%;
}

#nav_right_background{
    position:fixed;
    top: 0%;
    right: 0%;
    width: 12%;
    height: 100%;
    background-color: white;
    z-index: 100;
}

#nav_right_content{
    position:fixed;
    top: 3%;
    right: 1.5%;
    width: 3.6%;
    z-index: 200;
}

#nav_right_content img{
    width: 100%;
}

/***********
Work
************/

#mobile_image_grid_landscape { 
    visibility: visible;
    display:block;
    position: absolute;
    top: 11%;
    left: 18.125%;
    width: 63.75%;
    padding-bottom: 100px;
}

#mobile_image_grid_landscape img{
    position:relative;
    width:49%; 
    display:inline-block;
}

.project_title_work_mobile {
    position:relative;
    display:inline-block;
    width:50%;
    padding-top: 5px;
    padding-bottom: 20px;
    text-decoration: none;
}

/********** Hidden ************/
#image_grid,
#image_content,
#video_content,
#typographic_content,
#nav_left_background,
#nav_right_background,
#mobile_image_grid,
project_content_mobile{
    visibility: hidden;
    display: none;
}
/********** Hidden ************/

/***********
About, Contact, & Project Intros
************/

#typographic_content_mobile{
    visibility:visible;
    display:block;
    position:absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 63.75%;
    height: auto;
    z-index: 0;
}

/***********
Project
************/

#project_content_mobile{
    visibility:visible;
    display:block;
    position:absolute;
    top: 11%;
    left: 18.125%;
    width: 63.75%;
    height: auto;
    padding-bottom: 100px;
    z-index: -100;
}

    .project_content_mobile img{
    position:relative;
    padding-bottom: 60px;
    display:block;
    width: 40%;
    margin: auto;
    }

    .project_title_mobile{
    visibility: visible;
    display: block;
    position:relative;
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 15px;
    z-index: -100;
    }

    .project_description_mobile{
    visibility: visible;
    display: block;
    position:relative;
    width: 100%;
    height: auto;
    padding-bottom: 15px;
    z-index: -100;
    }

    .credits_mobile{
    visibility: visible;
    display: block;
    position:relative;
    width: 100%;
    height: auto;
    padding-bottom: 50px;
    z-index: -100;
    }

    video{
    position:relative;
    display:inline-block;
    width: 100%;
    height: auto;
    z-index: -100;  
    }

链接的CSS文件2 - 排版

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

/***********
Work
************/

.project_title_work_mobile,
.project_title_work_mobile a:link,
.project_title_work_mobile a:visited,
.project_title_work_mobile a:hover,
.project_title_work_mobile a:active{
    font-family: 'Avenir-Book';
    font-size:40px;
    font-weight:700;
    text-transform:uppercase;
    color: #000000;
    text-align:center;
    text-decoration: none;
}

/***********
Project
************/

.project_title_mobile,
.project_title_mobile a:link,
.project_title_mobile a:visited,
.project_title_mobile a:hover,
.project_title_mobile a:active{
    font-family: 'Avenir-Book';
    font-size:90px;
    line-height: 90px;
    font-weight: 700;
    text-align:center;
    margin-top: -5px;
    text-transform:uppercase;
    text-decoration: none;
    color: #000;    
}

.project_description_mobile,
.project_description_mobile a:link,
.project_description_mobile a:visited,
.project_description_mobile a:hover,
.project_description_mobile a:active{
    font-family: 'Avenir-Book';
    font-size:35px;
    font-weight: 500;
    text-align:center;
    text-decoration: none;
    color: #000;    
}

.credits_mobile{
    font-family: 'Avenir-Book';
    font-size:25px;
    font-weight: 500;
    text-align:center;
    text-decoration: none;
    color: #000;
}

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  /***********
Work
************/

.project_title_work_mobile,
.project_title_work_mobile a:link,
.project_title_work_mobile a:visited,
.project_title_work_mobile a:hover,
.project_title_work_mobile a:active{
    font-family: 'Avenir-Book';
    font-size:22px;
    font-weight:700;
    text-transform:uppercase;
    color: #000000;
    text-align:center;
    text-decoration: none;
}

/***********
Project
************/

.project_title_mobile,
.project_title_mobile a:link,
.project_title_mobile a:visited,
.project_title_mobile a:hover,
.project_title_mobile a:active{
    font-family: 'Avenir-Book';
    font-size:70px;
    line-height: 70px;
    font-weight: 700;
    text-align:center;
    margin-top: -5px;
    text-transform:uppercase;
    text-decoration: none;
    color: #000;    
}

.project_description_mobile,
.project_description_mobile a:link,
.project_description_mobile a:visited,
.project_description_mobile a:hover,
.project_description_mobile a:active{
    font-family: 'Avenir-Book';
    font-size:20px;
    font-weight: 500;
    text-align:center;
    text-decoration: none;
    color: #000;    
}

.credits_mobile,
.credits_mobile a:link,
.credits_mobile a:visited,
.credits_mobile a:hover,
.credits_mobile a:active{
    font-family: 'Avenir-Book';
    font-size:17px;
    font-weight: 500;
    text-align:center;
    text-decoration: none;
    color: #000;
}
}

下面是一些比较图片，显示了当前文字的显示方式。

纵向定位

景观定位

Answer 1

试试这个css属性

-webkit-text-size-adjust: 100%;