flexible的原理

最新推荐文章于 2024-03-19 09:54:04 发布

于丸

最新推荐文章于 2024-03-19 09:54:04 发布

阅读量2.2k

点赞数 1

分类专栏：插件

本文链接：https://blog.youkuaiyun.com/Ych_cxy/article/details/103406822

版权

插件专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="lib-flexible/index.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*flexible的原理是把屏幕分成10份数,比如苹果6,屏幕的宽度是375,html的fontSize为37.5px,2rem就是75px,*/
        /*如果切换成苹果5,屏幕的宽度为320,html的fontSize为32px,那么你设置的2rem就是64px*/


        /*作为开发者只需要考虑:
        举个例子,设计稿是750的div是150,计算公式为150/75*/
        div{
            width: 2rem;
            height: 2rem;
            background: green;
            font-size: 0.37rem;
        }
    </style>
</head>
<body>
    <div>
        于春辉
    </div>
</body>
</html>