0


解决flex gap兼容性问题

前言

一个项目写下来,在网页端预览的时候正常,结果到产品经理手上。

设计稿样式

在这里插入图片描述

实际产品手机上样式

在这里插入图片描述

产品:“你这玩意儿怎么没间距?”

我:“为什么我的正常???呐呐呐你看我手机(来自RedmeK50Utral)”

产品:“哦,你看我的手机(来自荣耀20)”

我:“。。。”

至此我看了看我代码中的一堆gap,再看了看她那还不退休的老安卓,陷入了沉思!

解决办法

我的想法就是通过子元素设置右边和下边的间距,父元素设置同等值的,同方向的负magin值来实现gap同样的效果。

// xxxx.scss
.xxxxActions {
  display: flex;
  margin-right:-12px;
  margin-bottom:-12px;
    .xxxaa {
          margin-right:12px;
         margin-bottom:12px;
    }
}

你以为这样就结束了吗?漏!并不是这样的。每个文件中都这么写不累吗?作为一个懒鬼,我是非常不屑于这么写,不够优雅。

sass mixin用法

写过vue2的肯定都知道,mixin是个什么东西,sass同理

某观众:“这这这我熟啊!”

mixin简单来说,就是把一些共用的东西,给塞进来,mixin的英文翻译过来是混入的意思。就好比你是奶茶店的员工,你在做奶茶,每杯奶茶都需要加糖吧!但其他东西都不一样,这时候就可以把果糖封装起来,然后mixin混入一下,混到奶茶里,这杯奶茶就成了。是不是非常好理解

封装mixin

@mixin gap($size) {
    margin-bottom: calc(0px - $size);
    margin-right: calc(0px - $size);
    & > * {
        margin-right: $size;
        margin-bottom: $size;
    }
}

使用mixin

这里以vue cli5+webpack5实例,其他同理。uniapp中直接在uni.scss中写mixin,不需要多余配置

第一步:在vue.config.js中配置,webpack4把additionalData换成data就行

module.exports =defineConfig({
  css:{
    loaderOptions:{
      sass:{
        additionalData:`
          @import "@/assets/css/mixin.scss";
        `}},},})

这一步的配置作用是自动在每个scss文件中引入mixin.scss,这样才能访问到mixin函数

第二步:使用

.basicBottomActions {
    display: flex;
    @include gap(10px);
}

总结

以上就达到了gap同样的效果,并且保持了良好的兼容性。妈妈再也不怕兼容性不好的手机用不了gap啦!总之不管用的什么打包工具,vite也要webpack也好,原理是一样的。


本文转载自: https://blog.csdn.net/wz9608/article/details/130504885
版权归原作者 南风木兮丶 所有, 如有侵权,请联系我们删除。

“解决flex gap兼容性问题”的评论:

还没有评论