Question

您好，我试图动态调整字体大小。根据我的浏览器大小。

我已经拥有以下CSS，HTML和我试图在我的javascript中添加内容

CSS

#firstPosition
{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    background-color: black;
}

.textSize
{
    font-size: 150%;
    color: black;
}

HTML5

<div id="firstPosition">
    <p class="textSize">Hello</p>
</div>

我的定位是绝对的，所以即使我调整浏览器的大小，它也会保持在我的屏幕中心。但我的文字没有调整大小。

有什么建议吗？

感谢。

解决！

使用

font-size：1.2vw;代替

Answer 1

尝试在html头中添加此元标记

<head>
<title>Title</title>
....
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....
</head>

Answer 2

根据屏幕宽度调整大小（示例）

#firstPosition
{
    position: absolute;
    width: 50%; /** resize **/
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: black;
}

.textSize
{
    font-size: 3vw; /** resize **/
    color: #FFF;
    text-align: center;
}

<div id="firstPosition">
    <p class="textSize">Hello</p>
</div>

替代JQUERY解决方案

$( window ).resize(function() {
var ratio = $('#firstPosition').width() / 400;
$('.textSize').css({
  '-webkit-transform' : 'scale(' + ratio + ')',
  '-moz-transform'    : 'scale(' + ratio + ')',
  '-ms-transform'     : 'scale(' + ratio + ')',
  '-o-transform'      : 'scale(' + ratio + ')',
  'transform'         : 'scale(' + ratio + ')',
  'transform-origin'  : '50% 50%'
});
});

#firstPosition
{
    position: absolute;
    width: 50%;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: black;
}

.textSize {
  text-align: center;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="firstPosition">
    <p class="textSize">Hello</p>
</div>

Answer 3

使用媒体查询：

@media screen and (min-width: 640px) { body { font-size:12px; }}

此处，当浏览器大小至少为640或更低时，字体大小将为12px。

您需要根据您的要求调整min-width和CSS选择器。

请注意，您可以针对不同的尺寸进行多次媒体查询。

HTML5 fontsize在浏览器大小javascript / jquery上调整大小

3 个答案: