減小字體大小小屏幕上這樣的話不破

我的頁面標題是短，但與中長的話，我想一個句子中最長的單詞以適合屏幕的寬度。減小字體大小小屏幕上這樣的話不破

960像素

|        | 
|The Metropolitan Museum of Art| 
|        |

在移動（屏幕比約400像素下）我想換行文本作爲自然發生，以減少大小，以便在標題上最長的單詞決定了字體-尺寸。

460像素

|    | 
|The Metropolitan| 
|Museum of Art |

或更小

320像素

|The | 
|The Metropolitan| <----- "Metropolitan" bleeds out of the page 
|Museum | 
|of Art |

是否有可能根據「大都會」字減小字體大小的規則？

我不想打破的話：這只是糟糕的排版。

我知道我需要媒體的質疑，這不是問題。問題是如果我有一個像「supercalifragilistic」這樣的詞，即使我爲320px和font-size：12px設置媒體查詢，它也會留下空間或流失。

來源

2017-10-08 Francesco

我首先想到的是你可能會通過JavaScript應用規模做到這一點。 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale –

您可以使用媒體查詢，以減少低於320像素 –

包裝每個單詞的字體大小跨度，使每個跨度不破和100％寬度？（不在我的電腦測試，只是spitballing） –

如果你想要的文字的大小像大衆相關設備尺寸使用相對測量單位

例：

heading { 
    font-size: 10vw; 
}

來源

2017-10-08 14:48:52

你可以嘗試使用流體排版

CSS：

/* 
Font-size is fluid. 
It will be 16px when it reaches 300px width of the viewport 
and 30px when it reaches 1500px of the viewport. Beyond and below those 
breakpoints 
font-size will be also fluid but we can restrict this using @media queries. 
For example we can restrict that after viewport has reached the width of 1500px 
the font size will be set as the fixed point (e.g. 2em). 
*/ 
HTML { 
    font-family: Montserrat, sans-serif; 
    font-size: calc(16px + (30 - 16) * (100vw - 300px)/(1500 - 300)); 
} 

/* 
Notes: 

-*- The rem unit: 

* In IE9 and IE10, using rem with the shorthand `font` property will make the whole declaration invalid. 
Also, these two browsers don’t support rem units on pseudo elements. 

-*- Viewport units (vw, vh, vmin, vmax): 

* IE11 and Edge don’t support the vmax unit. 

-*- Calc: 

* calc with px and viewport units might not work in Safari, so 
we can replace px units with percentages, in order to use it with viewport 
units. 

* calc with percentages is totally broken on IE (both 11 and Edge) 
so you can use a regular calc() function with the em unit, 
followed by a -webkit-calc() function with the percentage unit 

*/ 


@media screen and (min-width: 1500px) { 

    HTML { 
    font-size: 1.875em; /*~30px*/ 
    } 

}

Example，我找到了。

來源

2017-10-09 12:11:21 Krusader

嘗試調整字體大小這樣

html { 
    font-size: 100%; 
} 

@media only screen and (max-width: 460px) 
html { 
    font-size: 90%; 
} 

@media only screen and (max-width: 320px) 
html { 
    font-size: 80%; 
}

來源

2017-10-15 12:42:01 DMP

減小字體大小小屏幕上這樣的話不破

回答

相關問題