html - 根据复制量调整文本大小

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%;