关于chrome浏览器css代码显示的问题

在跟着css案例进行练习的时候，有一个案例是使用less编写移动端的代码，但是根据案例敲，同样的代码，同样的浏览器，移动端是同样的手机型号显示，也是同样的完美视口，但是显示效果不同，请问这是怎么回事？、

图一：

图二：

图一为题主显示，图二为案例显示

你真的有认真学习吗？？？简直不敢恭维，属性乱七八糟，我只是简单帮你修改了一处，达到你截图案例的效果，其他问题你看截图吧，看以下错在哪里等等，我只能说你对着作业抄也抄错了，你该反思一下。另外要学会熟练利用开发者模式的调试效果。

链接: https://pan.baidu.com/s/1HTQYCryjCJFYNeMiYojmWg 提取码: qejp

截图

可能是缩放问题？

你这样贴图也没办法准确定位问题所在，你用了四个同样，但是可能敲的过程中写错了一个单词或者引用出错，他就变成了不一样。

建议如下：第一，对比图来说，样式明显没有起到效果，控制台定位 - 我的课程按钮，看按钮上样式是否相同，如果不同，根据你样式的引入方式去查错，看样式引用路径问题，还是代码编译问题错误去具体分析。

像素单位用的什么，最好贴一下源码

可以贴下源码吗？

发代码上来吧，好解决问题

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端页面</title>
    <link rel="stylesheet" href="../6.字体和背景(font&background)/fa/css/all.min.css">
    <link rel="stylesheet" href="./17/style.css">
    <style>

    </style>
</head>
<body>
    <!-- 创建头部容器 -->
    <header class="top-bar">
        <div class="menu-btn">
            <a href="#">
                <i class="fas fa-stream"></i>
            </a>
        </div>
        <h1 class="logo">
            <a href="#">
                爱学习
            </a>
        </h1>
        <div class="search-btn">
            <a href="#">
                <i class="fas fa-search"></i>
            </a>
        </div>
    </header>

    <!--banner  -->
    <div class="banner">
        <a href="#">
            <img src="./17/banner.png" alt="1">
        </a>
    </div>

    <!-- 菜单 -->
    <nav class="menu">
        <a class="course" href="#">
            <i class="fas fa-book"></i>
            我的课程
        </a>     
        <a class="star" href="#">
            <i class="fas fa-cut"></i>
            我的老师
        </a>
        <a class="sub" href="#">
            <i class="fas fa-envelope"></i>
            我的订阅
        </a>
        <a class="download" href="#">
            <i class="fas fa-globe"></i>
            我的下载
        </a>  
    </nav>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

@total-width:750;

//设置根元素
html{
    //设置rem比值
    font-size: 100vw/@total-width * 40;
    background-color: #eff0f4;
}
.w{
    width: 693/40rem;
    margin: 0 auto;
}
a{
    text-decoration: none;
}
//设置头部header
.top-bar:extend(.w){
    //设置弹性容器
    display: flex;
    //设置高度
    height: 175/40px;
    //设置对齐方式
    justify-content: space-between;
    //设置辅轴的对齐方式
    align-items: center;

    a{
        color: #24253d;
        font-size: 36px;

        i{
            color: #999;
            font-size: 16px;
        }
    }
}

//设置banner
.banner:extend(.w){
    img{
        width: 100%;
    }
}


//设置中间菜单
.menu:extend(.w){
    //确定元素的高度
    height: 329/40rem;
    //设置弹性容器
    display: flex;

    //设置换行
    flex-flow: row wrap;
    //设置对齐方式
    justify-content: space-around;
    //设置辅轴对齐方式
    align-content: space-between;


    //设置框的大小
    //一旦设置了弹性元素，就不区分行内元素和块元素了
    a{
        display: block;
        font-size: 25px;
        width: 327/40rem;
        height: 104/40rem;
        line-height: 104/40rem;
        color: white;
        border-radius: 10/40rem;
        i{
            margin: 0 20/40rem 0 38/40rem;
        }
    }

    .course{
        background-color: #f97053;
    }
    .star{
        background-color: #cd6efe;
    }
    .sub{
        background-color: #fe4479;
    }
    .download{
        background-color: #1bc4fb;
    }
    
}

https://github.com/OutMinds/cats

案例已经上传到github，大佬们可以下载

我知道，所以我说简单帮你处理了一下，你也知道lees没有转换而是直接输出了，是不是没有引用其他东西？？

less.js是不是用这个？？如果是，我下载你的源码包也没有