前端 css 移动适配 - vw

技术拾荒者

已于 2024-09-09 11:59:40 修改

阅读量340

点赞数 3

文章标签：前端 css

于 2024-09-08 10:29:55 首次发布

本文链接：https://blog.csdn.net/weixin_53720617/article/details/142022903

版权

vw -适配方案

vw - 布局

1. 确定设计稿对应的vw尺寸（1/100视口宽度）

查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定 vw 尺寸（1/100 视口宽度）

2. vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度)

下边这个是less 代码块。先确定了变量，@vw:37.5vw;

//out:../css/

@import "./base.less";
//定义变量
@vw:3.75vw;

body{
    background-color: #f9fafb;
}

//头部
header{
    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15 / @vw);
    height: (50 / @vw);
    width: 100vw;
    background-color: #fff;
    .left{
        width: (235/@vw);
        height: (50/@vw);
        background-image: url(../assets/head.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    a{
        width: (80 / @vw);
        height: (30 / @vw);
        background-color: #ffe31b;
        border-radius: (15 / @vw);
        text-align: center;
        line-height: (30 / @vw);
        font-size: (14 / @vw);
    }
}
//搜索

注意：在用vw 视口宽度做适配时，不能与vh 一同使用。