[英]Vertical text alignment in a DIV - responsive text sizing
我有一个wordpress网站,我正在尝试将文本垂直浮动在滑块图像的顶部。
我已使用以下CSS在滑块小部件上硬编码了一个静态的全角图像。
.slider-wide {
clear: both;
width: 100%;
height: 560px;
background: url(http://photourl);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
现在问这个问题。 当文本在宽屏上看起来很漂亮时,当缩小浏览器窗口或从移动设备查看时,文本会溢出滑块图像并溢出到其他小部件中。
有没有一种方法可以仅将文本锁定在滑块小部件中? 响应文本大小如何?
是的,如果使用视口单位 ,则可以在文本上使用“响应式”文本大小。
此类单位支持的值之一是基于容器的宽度,高度或两者兼而有之的百分比值。这是概念的示例: 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.