我很难理解字体缩放.
我目前有这个网站的身体font-size100%.但是100%的是什么?这似乎计算在16px.
我的印象是,100%会以某种方式引用浏览器窗口的大小,但显然不是因为它总是16px,无论窗口是否调整为移动宽度或完整的宽屏桌面.
如何使我的网站上的文本与其容器相关?我尝试过使用,em但这也没有扩展.
我的理由是,事情就像我的菜单中就当调整压扁,所以我需要减少PX px的font-size相对其它元素的容器的宽度之中.(例如,在大型桌面上的菜单中,22px可以完美运行.向下移动到平板电脑宽度,16px更合适.)
我知道我可以添加断点,但我真的希望文本可以扩展为具有额外的断点,否则我将最终为每100px宽度减少数百个断点来控制文本.
我希望我的div中的文本与%父div 保持相同的百分比.IE我希望我的文本有font-size50%的父母div宽度.因此,当页面大小发生变化时,文本始终保持相同的大小%.
这就是我在说的:
.counter-holder{
display: block;
position: absolute;
width:90%;
height:20%;
top: 70%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
.counter-element-box{
position:relative;
vertical-align: text-top;
border-style: solid;
border-width: 1px;
width: 20%;
height: 100%;
float:left;
margin: 6%;
}
.counter-element-text{
position:absolute;
top:50%;
width: 50%;
max-width:50%;
display: inline-block;
height:100%;
margin-left:50%;
font-size : 80%;overflow: hidden;
}
.counter-element-value{
position:absolute;
top:50%;
width: 50%;
max-width:50%;
display: inline-block;
height:100%;
padding-left:30%;
font-size : 80%;overflow: hidden;
}Run Code Online (Sandbox Code Playgroud)
<div class="counter-holder">
<div class="counter-element-box"> …Run Code Online (Sandbox Code Playgroud)我有一个宽度为70%的div,这就是我想要做的:
只有css这可能吗?这是我的代码:
.parent {
width:70%;
height:auto;
min-height:100px;
background:red;
font-size:10vw;
}Run Code Online (Sandbox Code Playgroud)
Please help me to change the font-size dynamically to the parent class
<hr>
<div class="parent">
This Text
</div>Run Code Online (Sandbox Code Playgroud)
注意:div 大小是响应的,这很重要.提前致谢!