flexible布局原理

最新推荐文章于 2025-05-21 18:29:00 发布

原创最新推荐文章于 2025-05-21 18:29:00 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css3

Html 专栏收录该内容

30 篇文章

订阅专栏

这篇博客介绍了一种使用flexible.js插件将px转换为rem的方法，以实现移动端网页的响应式布局。通过设置body的最小和最大宽度，确保在不同设备上页面的适配性。文章还提到了cssrem插件，该插件有助于开发者快速进行px到rem的转换，提升开发效率。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
        min-width: 320px;
        max-width: 750px;
        width: 10rem;  /*  //是flexible划分屏幕10等分 750/10=75    750/75=10rem */
        margin: 0 auto;
        line-height: 1.5;
        font-family: Arial, Helvetica, sans-serif;

    }
    </style>
    <script src="flexible.js"></script>
    <title>Document</title>
</head>
<body>
    SFDF
</body>
</html>