移动端适配与less的使用

一木知夏

已于 2022-05-16 21:29:03 修改

阅读量521

点赞数 1

文章标签： less css html

于 2022-05-16 21:25:49 首次发布

本文链接：https://blog.csdn.net/m0_52908502/article/details/124808509

版权

移动端最大的问题应该是不同的手机物理像素不同直接影响理想视口的布局,所以pc端的pc单位就变得不太适用.所以引入新的单位rem.rem单位是相对单位rem单位是相对于HTML标签的字号计算结果.1rem = 1HTML字号大小.目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10.这样不同大小的手机也能按照我们的布局等比例缩放,类似于百分比布局

    <style>
        /* rem是一个相对单位 ,相对于我们的html的字体大小 */
        html {
            font-size: 40px;
        }

        .box {
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }

        /*使用rem做适配:就是通过html根标签的字体大小来控制我们内容的大小 */
    </style>
</head>

<body>
    <div class="box"></div>
</body>

上面这段代码输出一个80*80的盒子.简而言之网页布局中把px单位全部换成rem就能实现移动端适配.

同时出现问题,不同的屏幕大小难道要一个个设置吗?

    <style>
        /* 页面一般我们只分成10等份 */
        /*屏幕为375px时设置字体大小为37.5px*/
        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }

        @media (width:390px) {
            html {
                font-size: 39px;
            }
        }

        @media (width:414px) {
            html {
                font-size: 41.4px;
            }
        }


        .box {
            /* calc他是css提供的一个计算方式 */
            /* 测量出像素/37.5 = rem值*/

            width: calc(75rem / 37.5);
            height: calc(75rem / 37.5);
            /* width: 2rem;
            height: 2rem; */
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- 需求:做一个75px*75px的盒子出来  标准稿iphone6,7,8-->
    <div class="box"></div>
</body>

这时我们使用less来完成大量的移动端适配问题

less简单来说就是一个预处理器,来过滤我们的css代码.后面写css样式也推荐使用less 先在我们的vsCode下载插件

大致写法与css相同，使用时保存会生成一个对应的css文件,我们还是引用css文件.我们需要用到的就是一个计算方式与选择器和变量。下面我用代码来展示

.box {
    // 符号中间需要空格
    // 加
    width: 100px + 100px;
    // 减
    height: 200px - 100;
    // 乘
    border: 5*2px solid #fff;
    // 除
    // 第一种写法
    // margin: 40 ./ 20px;
    // 第二种写法
    margin: (40px / 20);

    // 单位不同,默认的单位以第一个为准
    // padding: (150rem / 37.5px);
    // 一般后面计算这么写
    padding: (150 / 37.5rem);
}
// 后代选择器
.father {
    .son {
        color: red;
    }

    // 兄弟关系
    .son1 {
        font-size: 20px;
    }
}

// 并集选择器
.father,
.father1 {
    color: green
}

// 交集选择器
.father.father1 {
    color: yellow;
}

// 子代选择器
.father {

    // &表示当前的元素
    &>.son {
        color: rebeccapurple;
    }

    // 伪类
    &:hover {
        color: #fff;
    }

    // 伪元素
    &::before {
        content: '';
    }
}
// 变量=容器  容器是用来装东西,方便外面快速查找使用和管理
@yse: green;
@border: 1px solid #ccc;

// rem=测量值(px) / 37.5
// 标准稿 就是375px的大小 分成10等份 所以html的字体大小是37.5px
@baseSize: 37.5rem;

.box {
    width: (120 / @baseSize);
    height: (120 / @baseSize);
    color: @yse ;
    background-color: @yse;
    border: @border;
    border-left: @border;
    border-right: @border;
}

如同上面的代码演示,我们定义一个标准稿的变量.后面涉及px单位,只要引用这个变量并与测量的px值相除就可以了.注意变量设置时带有单位,后面的计算中就不要带单位了.