相关疑难解决方法(0)

基于容器宽度的字体缩放

我很难理解字体缩放.

我目前有这个网站的身体font-size100%.但是100%的是什么?这似乎计算在16px.

我的印象是,100%会以某种方式引用浏览器窗口的大小,但显然不是因为它总是16px,无论窗口是否调整为移动宽度或完整的宽屏桌面.

如何使我的网站上的文本与其容器相关?我尝试过使用,em但这也没有扩展.

我的理由是,事情就像我的菜单中就当调整压扁,所以我需要减少PX px的font-size相对其它元素的容器的宽度之中.(例如,在大型桌面上的菜单中,22px可以完美运行.向下移动到平板电脑宽度,16px更合适.)

我知道我可以添加断点,但我真的希望文本可以扩展为具有额外的断点,否则我将最终为每100px宽度减少数百个断点来控制文本.

css font-size responsive-design

1083
推荐指数
22
解决办法
108万
查看次数

如何使字体大小相对于父div?

我希望我的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)

css font-size

25
推荐指数
4
解决办法
6万
查看次数

CSS:是否可以将字体大小调整为div宽度?

我有一个宽度为70%的div,这就是我想要做的:

  • 在那个div中放了一些词
  • 调整字体大小,使这些单词占据所有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 大小是响应的,这很重要.提前致谢!

html css fonts font-size responsive-design

21
推荐指数
2
解决办法
3万
查看次数

标签 统计

css ×3

font-size ×3

responsive-design ×2

fonts ×1

html ×1