使用css3根据正文宽度设置字体大小
我想将使用css3根据正文宽度设置字体大小,css,responsive-design,font-size,Css,Responsive Design,Font Size,我想将的字体大小设置为自身宽度的5%（正文） 有没有一种纯粹的css3方法可以做到这一点 我现在正在使用jquery执行此操作，但我希望它更简单： $(function() { var $body = $('body'); function adjust_font_size() { $body.css('font-size', $body.width()*0.05+'px'); } adjust_font_size(); $(windo
字体大小设置为自身宽度的5%（正文
）
有没有一种纯粹的css3方法可以做到这一点
我现在正在使用jquery执行此操作，但我希望它更简单：
$(function() {
var $body = $('body');
function adjust_font_size() {
$body.css('font-size', $body.width()*0.05+'px');
}
adjust_font_size();
$(window).resize(adjust_font_size);
});
如果您的
标记的宽度与视口的宽度相同，则可以使用vw
单位：
vw：视口宽度的1/100。（）
body{
font-size:5vw;
}
如果您的
标签具有百分比宽度，vw
单位也可以工作（考虑到
标签没有固定宽度）
例如：
body{
width:50%; /* = 100% / 2 */
font-size:2.5vw; /* = 5vw / 2 */
}
如果您的body标签具有固定宽度（以px、em…为单位），则使用vw
设置的字体大小将无法适应其宽度
浏览器对vw单元的支持为IE9+，以获取更多信息。这取决于OP是否真正表示“视口”而不是“主体”，除非他们有非常具体的原因使字体大小相对于主体而不是视口。我倾向于相信前者，尽管OP反复引用body
元素，但我在回答中添加了一些相关信息。