使用flexble配合rem实现移动端自适应

最新推荐文章于 2022-11-26 17:53:20 发布

panliyou

最新推荐文章于 2022-11-26 17:53:20 发布

阅读量329

点赞数

分类专栏：移动端适配文章标签：前端 html js

本文链接：https://blog.csdn.net/weixin_39411655/article/details/113792069

版权

flexible.js rem 移动端适配 CSS布局响应式设计

关键词由CSDN通过智能技术生成

移动端适配专栏收录该内容

0 篇文章 0 订阅

订阅专栏

使用flexble配合rem实现移动端自适应

flexble 下载地址：

https://download.csdn.net/download/weixin_39411655/15206974.

引入flexble js文件

对于小于320px和大于750px屏幕应该不再随着屏幕的改变而改变

代码：

 @media screen and (min-width: 750px) {
            html {
                font-size: 75px !important;
            }
        }

        @media screen and (max-width: 320px) {
            html {
                font-size: 32px !important;
            }
        }
           body {
            min-width: 320px;
            max-width: 750px;
            width: 100%;
            margin: 0 auto;
            line-height: 1.5;
            font-size: 14px;
            font-family: Arial, Helvetica;
        }

前期准备工作做完后，往后就可以直接用rem单位代替px单位

如果用的是VS-code编辑器，可以在扩展商店直接下载一个px转rem单位的插件即可

在这里插入图片描述
以后就可以输入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,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="js/flexible.js"></script>

    <style>
        /* 对于小于320px和大于750px屏幕应该不再随着屏幕的改变而改变 */
        @media screen and (min-width: 750px) {
            html {
                font-size: 75px !important;
            }
        }

        @media screen and (max-width: 320px) {
            html {
                font-size: 32px !important;
            }
        }

        /* 清除默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        body {
            min-width: 320px;
            max-width: 750px;
            width: 100%;
            margin: 0 auto;
            line-height: 1.5;
            font-size: 14px;
            font-family: Arial, Helvetica;
        }


        .main_nav {
            margin-top: 1.333333rem;
        }

        .main_nav ul {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            display: none;
        }

        .main_nav ul li {
            width: 25%;
            height: 2.053333rem;
        }

        .main_nav ul li a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .main_nav ul li a img {
            width: 1rem;
            height: 1rem;
        }

        .main_nav ul li a .title {
            margin-top: 10px;
            font-size: 0.32rem;
            color: #767676;
        }

        .main_nav .current {
            display: flex;
        }

        .main_nav .nav_tab {
            display: flex;
            justify-content: center;
            margin-bottom: 0.226667rem;
        }

        .main_nav .nav_tab a {
            display: block;
            margin: 0 0.24rem;
            width: 0.2rem;
            height: 0.2rem;
            border-radius: 50%;
            background-color: #c1b6ba;
        }

        .main_nav .nav_tab .tab_current {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="main_nav">
        <div class="nav_body">
            <ul class='current'>
                <li>
                    <a href="#">
                        <img src="./images/icon_03.png" alt="">
                        <div class="title">美食</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/icon_05.png" alt="">
                        <div class="title">家居生活</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/icon_07.png" alt="">
                        <div class="title">服饰箱包</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/icon_09.png" alt="">
                        <div class="title">电影/演出</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/icon_15.png" alt="">
                        <div class="title">购物商场</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/icon_16.png" alt="">
                        <div class="title">零食饮料</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/icon_17.png" alt="">
                        <div class="title">票卷</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/icon_18.png" alt="">
                        <div class="title">旅行出游</div>
                    </a>
                </li>
            </ul>

        </div>
        <div class="nav_tab">
            <a href="#" class='tab_current'></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
    </div>
</body>

</html>

panliyou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用flexble配合rem实现移动端自适应

使用flexble配合rem实现移动端自适应flexble 下载地址：https://download.csdn.net/download/weixin_39411655/15206974.引入flexble js文件对于小于320px和大于750px屏幕应该不再随着屏幕的改变而改变代码： @media screen and (min-width: 750px) { html { font-size: 75px !important;
复制链接

扫一扫