放大DIV标签 [英] Enlarge DIV tag
问题描述
昨天我问了一个问题如何使文本在HTML页面中垂直和水平居中，一种将文本居中在页面中间(垂直和水平)的方法.
Yesterday I asked the question How to make text vertically and horizontally center in an HTML page, regarding a way to center text in the middle of a page (vertical and horizontal).
该解决方案效果很好，但是现在我想增加文本大小，但是问题是我不想使用像单位测量一样的"px"，因为这是一种静态方法，无法适应所有屏幕尺寸
The solution works fine, but now I want to increase the text size, but the problem is that I do not want to use the 'px' like unit measure, because is a static way and could not adapt to all screen sizes.
因此，我想对文本使用百分比单位度量.
I therefore want to use the percentage unit measure for text.
HTML代码:
<body>
<div class="my-block">
WORD1<br />
WORDWORDWORDWORD2
</div>
</body>
我面临的困难是<div />的高度.我不能把div的高度等于body的高度，宽度相等，因为div是一个块元素，但是我如何把div的高度等于body?
The difficulty I am facing is with the height of the <div />. I cannot put the height of the div equal to the height of the body, the width is equal because the div is a block element, but how I put the height of the div equal to the height of the body?
我已经尝试将padding和margin设置为0，将height设置为100%，但是没有任何效果.
I already tried to put the padding and margin as 0 and the height to 100% but nothing works.
有人可以帮助我吗?
推荐答案
我认为这是您需要的:
<style type="text/css">
html {height: 100%;}
body {margin: 0;padding: 0;height: 100%;}
.my-block {height:100%;}
</style>
查看实际情况: 100％的高度
但是，如果您想使"文本适应所有屏幕尺寸"，则有一个问题.字体大小所用的百分比和EM单位完全相同(至少在理论上，尽管％在兼容性方面更好)-它们根据文本的实际大小(以像素为单位)缩放文本.换句话说，font-size:xx％不会根据其容器的高度或宽度来缩放文本，而是根据当前的文本大小来缩放.
However if you want to "adapt" your text "to all screen sizes" there is a catch. Percentage and EM units used with font-size do exactly the same (at least in theory, although % are better in terms of compatibility) - they scale text based on its actual size in pixels. In other words font-size:xx% does not scale text based on its container height or width but based on current text size.
请参见 css字体单位
您可以通过使用javascript实现所需的功能.但是，我建议您不要这样做.让用户决定是否需要放大/缩放.
干杯！
这篇关于放大DIV标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
