本文介绍了一种通过JavaScript动态调整网页文章字体大小和行高的方法，此方法能够提升不同设备上的阅读体验，适用于响应式设计。
转载自品略图书馆 http://www.pinlue.com/article/2020/03/1811/3210033606739.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function articleSize(size,lineheight){
var article = document.getElementById("article");
article.style.fontSize = size+"px";
article.style.lineHeight = lineheight+"px";
}
</script>
</head>
<body>
<a href="#" title="" onclick="articleSize(16,24);">大</a>
<a href="#" title="" onclick="articleSize(14,24);">中</a>
<a href="#" title="" onclick="articleSize(12,24);">小</a>
<div id="article">此处显示 id "article" 的内容
此处显示 id "article" 的内容此处显示 id "article" 的内容此处显示 id "article" 的内容此处显示 id "article" 的内容此处显示 id "article" 的内容此处显示 id "article" 的内容此处显示 id "article" 的内容此处显示 id "article" 的内容此处显示 id "article" 的内容此处显示 id "article" 的内容
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
