DIV 中的垂直文本对齐 - 响应式文本大小答案

【问题标题】：Vertical text alignment in a DIV - responsive text sizingDIV 中的垂直文本对齐 - 响应式文本大小
【发布时间】：2014-08-25 16:09:46
【问题描述】：

我有一个 wordpress 网站，我正在尝试在滑块图像上垂直浮动文本。

我使用以下 CSS 在我的滑块小部件上硬编码了一个静态全宽图像。

.slider-wide {
clear: both;
width: 100%;
height: 560px;
    background: url(http://photourl);
background-position: center;
background-repeat: no-repeat;
background-size: cover; 

}

现在回答问题。虽然文本在宽屏上看起来很漂亮，但当浏览器窗口缩小或从移动设备查看时，文本会溢出滑块图像并溢出到其他小部件中。

有没有办法将此文本锁定到仅滑块小部件中？以某种方式响应文本大小？

【问题讨论】：

查找 CSS 媒体查询并根据屏幕大小更改字体大小。
也许强制将文本放在一行中？ white-space: nowrap;

标签： css slider vertical-alignment responsive-slides

【解决方案1】：

是的，如果您使用视口单位，您可以在文本上使用“响应式”文本大小。

这种单位支持的值之一是百分比值，基于容器的宽度、高度或两者...以下是该概念的示例：http://jsfiddle.net/t7b8ytrq/

{
    font-size: 2vh; /* size based on container's height */
    font-size: 2vw; /* size based on container's width */
    font-size: 2vmin; /* size based on witchever is smaller (width or height) */
    font-size: 2vmax; /* size based on witchever is higher (width or height) */
}

在此处阅读规格：http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

【讨论】：