css样式问题汇总

 1、变量样式引用：var(--height)

      eg: <div class='auto-width' :style="{'--width': width+'px}"></div>

         <style>

            .auto-width{
                width:var(--width)
            }
         </style>

 

2、ios底部安全距离

index.html引入：  
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> 

css设置：
.ios_safe {
    padding-bottom: 70px;
    padding-bottom: calc(~"70px + constant(safe-area-inset-bottom)");
    padding-bottom: calc(~"70px + env(safe-area-inset-bottom)");
    box-sizing: border-box;
    .footer {
        height: calc(~"50px + constant(safe-area-inset-bottom)");
        height: calc(~"50px + env(safe-area-inset-bottom)");
        padding-bottom:constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
     }
}

3、less引入问题

1. 指定版本安装

   npm install less-loader@4.1.0 --save

2. 引入

   vue add style-resources-loader
   
   
   / 如果没有下载path插件需要先安装一下
   const path = require('path')
   module.exports = {
     pluginOptions: {
       'style-resources-loader': {
         preProcessor: 'less', // 如果你使用的是scss，那这里要写scss
         patterns: [
           // 此路径要根据你的实际情况
           path.resolve(__dirname, './src/assets/variableCss.less')
         ]
       }
     }
   }
   
   
   
   //文件路径：'./src/assets/variableCss.less

   vue-cli3.0搭建项目后--使用全局颜色(样式)变量(style-resources-loader)_style-resources-loader vue3_由本的博客-CSDN博客

4、移动端1px问题（scss）        

@mixin border-1px($color) {
    position: relative;
    // 添加伪类
    &:after{
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        border-top: 10px solid $color;
        content: '';
    }
}


<style lang="scss"scoped>
.tab {
  display: flex;
  @include border-1px(red);
  
 }
</style>

5、移动端1px（less）

.border-1px(@postiton:bottom,@color:red,@height:1px,@width:100%){
    positive:relate;
    $::after{
        content:'';
        display:block;
        postion:absolute;
        @{position}:0;
        left:0;
        width:@width;
        height:@height;
        background-color:@color;
        transform:scleY(0.5)
    }
}

.content{
    .border-1px(bottom,#e0e0e0)
}