直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style >
.father {
font-size: calc( 12px + (16 - 12) * ( (100vw - 400px) / ( 1500 - 400) ));
}
.son {
font-size: 1em;
}
.son1 {
font-size: 1.5em;
}
.son2 {
font-size: 2em;
}
.son3 {
font-size: 2.5em;
}
</style>
</head>
<body >
<div class="father">
<p style = "color:green" class="test"> my name is qq ,from china </p>
<p style = "color:green" class="son1"> my name is qq ,from china </p>
<p style = "color:green" class="son2"> my name is qq ,from china </p>
<p style = "color:green" class="son3"> my name is qq ,from china </p>
</div>
</body>
</html>
利用css提供的计算属性来计算每个窗口的大小下应该显示的字体大小。用来解决各个像素下字体适配的。比起media查询来更加方便。
网友评论