1. 首頁
  2. 問答
  3. 文本大小取決於副本數量

文本大小取決於副本數量

2015-10-16 27 views
0

我有一段奇怪的行爲，當前正在媒體查詢中處理一段代碼。 我已經使用了相同的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; 
} 
}

下面是一些比較圖像，顯示文本當前如何顯示。

肖像取向

enter image description here

enter image description here

風景取向

enter image description here

enter image description here

來源

2015-10-16 Sam Pittman

回答

0

試試這個CSS屬性

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

來源

2015-10-16 16:22:30 Shailesh

相關問題

 相關問題