![image]()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rem适配</title><style>*{padding: 0;margin: 0;}/* 1.使用媒体查询，给不同视口的屏幕设置不同的HTML字号 *//* @media (width:320px) {html{font-size: 32px;}}@media (width:375px) {html{font-size: 37.5px;}}@media (width:414px) {html{font-size: 41.1px;}} *//* js库可以实现媒体查询的效果，并且包含的型号更广泛 *//* 2.使用rem书写字号 */.box{width: 5rem;height: 3rem;background-color: pink;}</style>
</head>
<body><div class="box"></div><!-- 引入js库 --><script src="flexible.js"></script>
</body>
</html>
![image]()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rem布局</title><style>/* 68*29 */div{width: 1.813rem;height: 0.773rem;background-color: pink;}</style>
</head>
<body><div></div><script src="flexible.js"></script>
</body>
</html>
![image]()
