首页 > 代码库 > 自适应字体配置

自适应字体配置

2024-08-16 22:26:15   218人阅读

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"  content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no,">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
html, body{
    font-size: 10px;
    padding: 0;
    margin: 0;
}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:10px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:10px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:12px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:12px}}
@media screen and (min-width:720px){html{font-size:16px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px)and (max-width:1199px){html{font-size:25px}}
@media screen and (min-width:1200px){html{font-size:30px}}
div.box{
    font-size: 2rem;
    height: 10rem;
    background: black;
    color: white;
    padding: 1rem;
}
</style>
</head>
<body>
    <div class="box">
        请缩小窗口试试！
        通过适配，然后控制rem的大小。达到字体或者盒子的自适应
    </div>
</body>
</html>

 

自适应字体配置


联系
我们