减小字体大小小屏幕上这样的话不破

我的页面标题是短，但与中长的话，我想一个句子中最长的单词以适合屏幕的宽度。减小字体大小小屏幕上这样的话不破

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

减小字体大小小屏幕上这样的话不破

回答

相关问题