Question

我想在主页上的横幅上放置一些文字。当我在开发人员模式下缩放时，横幅会动态地改变它的大小。 Hower我可以管理文本相对于横幅的位置，并根据缩放因子更改字体大小。我尝试使用font-size vh，vw，％etc。

以下是jsfiddle上的示例： https://jsfiddle.net/malptek/2o3a81vp/2/

我的HTML代码：

<div class="header-container clearfix">
    <!-- <div class="helper-box"></div> -->
    <h1 class="header-post-title-banner header-subimage">This is a title</h1>
    <img src="http://mesut.alptekin.de/wp-content/uploads/tmpbanner.jpg" class="header-image">
</div>

和css：

.header-container {
margin-bottom: 0;
font-size: 16px;
z-index: 1;
/* border-bottom: 1px solid #EAEAEA; */
position: relative;
width: 100%;
}

.helper-box {
z-index: 2; 
position: absolute;
margin-left: 8%;
background-color: #ababab;
margin-bottom: 0; 
width: 260px; 
height: 20%;
}

.header-subimage {     
z-index: 2;
font-size: 16px;
position: absolute;
margin-left: 8%;
margin-bottom: 0;
/*  background-color: #fff;
opacity: .5;     */     
width: 20%;     
height: 20%; 
/* width: 8em;     
height: 1.67em; */ 
}

.header-image {
z-index: 1;
margin-bottom: 0;
/* border-bottom: 1px solid #EAEAEA; */
width: 100%;
position: relative;
}

.header-post-title-banner {
/* font-size: 3vh;
font-size: 2vw; */
font-size: 150%;
text-align: center;
color: #1b6dba;
font-weight: bold;
padding-bottom: 0;
}

@media screen and (min-width: 1285px) {
.header-post-title-banner {
    font-size: 1.8em;
    text-align: center;
    color: #1b6dba;
    font-weight: bold;
    padding-bottom: 0;
 }
}

================================== 的更新：

好吧，这个例子正在运行，因为视口大小与横幅相同。但是你可以想象横幅在1400px宽的另一个大的内部（参见新的例子：jsfiddle.net/malptek/2o3a81vp/7）。但是，在这个例子中，图像在某种程度上不会根据新的缩放比例（不知道为什么）。

Answer 1

vw。

为我工作

https://jsfiddle.net/abalter/2o3a81vp/3/

CSS长度测量vw，vh和vmin开始得到广泛支持。

http://caniuse.com/#feat=viewport-units

我对如何解释全局浏览器使用百分比感到困惑，但是，除非您担心与旧浏览器的兼容性，否则您可以非常自由地使用它们。

CSS: Are view height (vh) and view width (vw) units widely supported?

使用css以屏幕大小动态缩放和定位文本

1 个答案: