移动端字体自适应

最新推荐文章于 2024-05-06 19:42:56 发布

SuperHeroGP

最新推荐文章于 2024-05-06 19:42:56 发布

阅读量406

点赞数 1

分类专栏： ionic 移动端开发文章标签：移动字体

ionic 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

移动端开发

1 篇文章 0 订阅

订阅专栏

在移动端的项目中，如果只是单纯的用px来改变字体大小是不行的，可以通过rem来控制字体的大小，但是得先写好适配。

献上代码

<!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>