Javascript 使用CSS/jQuery的响应字体大小_Javascript_Jquery_Html_Css_Responsive Design

Javascript 使用CSS/jQuery的响应字体大小

javascript jquery html css responsive-design

Javascript 使用CSS/jQuery的响应字体大小,javascript,jquery,html,css,responsive-design,Javascript,Jquery,Html,Css,Responsive Design,我想在div中创建一个响应文本我试过了，但他们根本不为我工作 FlowType不使用所有可用空间，仅使用其一部分（），而textfill不考虑高度（）我是在不正确地使用它们，还是我想要的太难实现我的HTML： <body> <div class="external"> <div class="internal">Example</div> </div> </body> PS.目

我想在div中创建一个响应文本

我试过了，但他们根本不为我工作

FlowType不使用所有可用空间，仅使用其一部分（），而textfill不考虑高度（）

我是在不正确地使用它们，还是我想要的太难实现

我的HTML：

<body>
    <div class="external">
        <div class="internal">Example</div>
    </div>    
</body>

PS.目前对视口的支持不够。

CSS

.internal{width:100%;height:100%}
.external{width:auto;height:auto;background-color:yellow}

JQuery

$(".external").fitText(0.5);

$(".external").fitText();

var ex=$(".external");
var h=ex.height();
var w=ex.width();
ex.fitText(Math.min(h,w)/Math.max(h,w) );

更新1：

CSS

.internal{width:auto;height:auto;position:absolute;}
.external{width:400px;height:50px;background-color:yellow;position:relative;}

JQuery

$(".external").fitText(0.5);

$(".external").fitText();

var ex=$(".external");
var h=ex.height();
var w=ex.width();
ex.fitText(Math.min(h,w)/Math.max(h,w) );

更新2：

JQuery

$(".external").fitText(0.5);

$(".external").fitText();

var ex=$(".external");
var h=ex.height();
var w=ex.width();
ex.fitText(Math.min(h,w)/Math.max(h,w) );

更新4：

Bigtext是一个jQuery文本插件，可以自动放大文本的字体大小以填充其父容器，而不会溢出容器

Div

。 CSS

.internal{width:100%;height:100%}
.external{width:auto;height:auto;background-color:yellow}

JQuery

$(".external").fitText(0.5);

$(".external").fitText();

var ex=$(".external");
var h=ex.height();
var w=ex.width();
ex.fitText(Math.min(h,w)/Math.max(h,w) );

更新1：

CSS

.internal{width:auto;height:auto;position:absolute;}
.external{width:400px;height:50px;background-color:yellow;position:relative;}

JQuery

$(".external").fitText(0.5);

$(".external").fitText();

var ex=$(".external");
var h=ex.height();
var w=ex.width();
ex.fitText(Math.min(h,w)/Math.max(h,w) );

更新2：

JQuery

$(".external").fitText(0.5);

$(".external").fitText();

var ex=$(".external");
var h=ex.height();
var w=ex.width();
ex.fitText(Math.min(h,w)/Math.max(h,w) );

更新4：

Bigtext是一个jQuery文本插件，可以自动放大文本的字体大小以填充其父容器，而不会溢出容器

Div

。

编辑：使用

调整大小

事件侦听器更新。更新

据我所知，您希望文本尽可能大，同时仍然适合包含

，对吗？我的解决方案是在文本周围放置一个符合文本正常大小的

。然后计算容器尺寸和

尺寸之间的比率。以较小的比率（宽度或高度）为准，使用该比率放大文本

HTML:

这是一个例子。调整CSS中的

.container

维度，以查看它的作用。

编辑：使用

调整大小

事件侦听器更新。更新

据我所知，您希望文本尽可能大，同时仍然适合包含

，对吗？我的解决方案是在文本周围放置一个符合文本正常大小的

。然后计算容器尺寸和

尺寸之间的比率。以较小的比率（宽度或高度）为准，使用该比率放大文本

HTML:

这是一个例子。在CSS中调整<代码>容器维度，以查看它的作用。

< P>对于任何偶然发现这篇旧文章的人，我已经找到了一个我认为完美的解决方案。你可以使用Dave Rupert编写的这个漂亮的插件，根据你的喜好配置设置，我为它添加了一个包装器，允许你定义要调整大小的元素。它还存储原始字体大小，因此当您向上缩放时，文本会受到其原始大小的限制，否则它会无限缩放

这里是一个片段和一个JSFIDLE

注意：该代码段仅在JSFIDLE中的resize上运行，因此请确保调整屏幕大小。在生产中，它是以负载运行的

var标题=[$（'h1'），$（'h2'），$（'h3'）]
$。每个（标题、功能（索引、标题）{
var fontsize=heading.css（'font-size'）；
$（窗口）.on（'load resize'，function（））{
if（heading.parent（）[0]&&
heading.parent（）[0]。scrollWidth>$（'.container'）。innerWidth（）{
标题.附件（1{
minFontSize:'10px'，
maxFontSize:fontsize
});
}
});
});
/*全局jQuery*/
/*!
*FitText.js 1.2
*
*Dave Rupert版权所有2011http://daverupert.com
*根据WTFPL许可证发布
* http://sam.zoy.org/wtfpl/
*
*日期：2011年5月5日星期四14:23:00-0600
*/
$.fn.fitText=功能（kompressor，选项）{
//设置选项
var压缩机=kompressor | | 1，
设置=$.extend({
“minFontSize”：Number.NEGATIVE_无穷大，
“maxFontSize”：Number.POSITIVE_无穷大
}，选项）；
返回此值。每个（函数（）{
//存储对象
var$this=$（this）；
//Resizer（）根据对象宽度除以压缩器*10来调整项目大小
var resizer=函数（）{
$this.css（'font-size'，Math.max（Math.min（$this.width（）/（compressor*10），parseFloat（settings.maxFontSize）），parseFloat（settings.minFontSize））；
};
//打一次电话设定。
resizer（）；
//调用resize。默认情况下，Opera会取消调整其大小。
$（窗口）.on（'resize.fittext-orientationchange.fittext'，resizer）；
});
};

.container{
宽度：80vw；
背景：黄色；
}
h1{
字体大小：5rem；
}
氢{
字号：4rem；
}
h3{
字体大小：3rem；
}
h4{
字号：1rem；
}


巨人峰
大丰
中等字体
小字体
对于那些偶然发现这篇旧文章的人来说，我找到了一个我认为完美的解决方案。
你可以使用Dave Rupert编写的这个漂亮的插件，根据你的喜好配置设置，我为它添加了一个包装器，允许你定义要调整大小的元素。它还存储原始字体大小，因此当您向上缩放时，文本会受到其原始大小的限制，否则它会无限缩放
这里是一个片段和一个JSFIDLE
注意：该代码段仅在JSFIDLE中的resize上运行，因此请确保调整屏幕大小。在生产中，它是以负载运行的
var标题=[$（'h1'），$（'h2'），$（'h3'）]
$。每个（标题、功能（索引、标题）{
var fontsize=heading.css（'font-size'）；
$（窗口）.on（'load resize'，function（））{
if（heading.parent（）[0]&&
heading.parent（）[0]。scrollWidth>$（'.container'）。innerWidth（）{
标题.附件（1{
minFontSize:'10px'，
maxFontSize:fontsize
});
}
});
});
/*全局jQuery*/
/*!
*FitText.js 1.2
*
*Dave Rupert版权所有2011http://daverupert.com
*根据WTFPL许可证发布
* http://sam.zoy.org/wtfpl/
*
*日期：2014年5月5日星期四：