移动端前端开发中常用的css

在开发移动端项目的时候，很多样式都是相同的，比如说图标大小，头像大小，页面底部保存(添加按钮），项目主体颜色等等，对于这些在项目中常用到的，通常都会写在公共样式中（public.css）以便代码复用。本文进行进行下总结（个人经验哈）

文本超出隐藏

     <!-- 文本一行超出隐藏 -->
    <div class="box2">xxxxxxxxxxxxxxxxx</div>
 //css
      .box2 {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

两行超出隐藏 

  <div class="box">这是一段很长的文本内容，用来测试多行文本截断的效果。这是一段很长的文本内容，
        用来测试多行文本截断的效果。这是一段很长的文本内容，用来测试多行文本截断的效果。</div>

    <style>
        .box {
            width: 200px;
            border: 1px solid red;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
        }
    </style>

一行三列 

   <div class="box">
      <div class="avtor"></div>
      <div class="">
        <div>比如这是标题</div>
        <div>商品描述</div>
      </div>
      <div class="boxItem">￥999999</div>
    </div>


     .box {
 
        border: 1px solid;
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: 10px;
        padding: 10px;
      }
      .avtor {
        width: 50px;
        height: 50px;
        background-color: hotpink;
        border-radius: 50%;
      }
      .box div:nth-child(3) {
        justify-self: end;
      }

遮罩层

    <div class="mask"></div>


   .mask {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 99;
      }

注意在使用遮罩层的使用，需要放置在根节点同级下。

如何放在有相对定位父盒子里面就不能遮起来整个页面了（绝对定位向上寻找相对定位的父盒子的时候没有则默认相对于body）

   <div style="position: relative;width: 200px;height: 200px;">
        <div class="mask"></div>
    </div>

某个元素需要在遮罩层上使用z-index 值大于遮罩层的z-index的值即可，这里修改下上面box的样式

    .box {
        border: 1px solid;
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: 10px;
        padding: 10px;
        position: relative;
        z-index: 100;
        background-color: #fff;
        margin-top: 50px;
      }

 主题色

无论是开发小程序还是app或者说pc端官网，项目整体风格有一个主题颜色。

   <!-- 主题色 -->
     <div class="cName main-col">
         这是公司名字
     </div>

     <div class="list">
        <div class="item ">全部</div>
        <div class="item main-col">公司简介</div>
        <div class="item ">产品分类</div>
        <div class="item ">产品分类</div>
        <div class="item ">产品分类</div>
     </div>


//css
    .main-col{
        color: blueviolet;
      }
      .cName{
        font-size: 20px;
      }
      .list{
        display: grid;
        grid-template-columns: repeat(5,auto);
      }

当需要更换主题风格的时候，只需要修改main-col的颜色即可 

  .main-col{
        color: rgb(32, 235, 116);
      }

 底部固定按钮

    <div class="mybtn">保存</div>

      .mybtn{
            position: fixed;
            width: 80%;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background:linear-gradient(to left,#e77a7a,#e26060);
            text-align: center;
            border-radius: 15px;
            padding: 10px 0px ;
            box-sizing: border-box;
            margin: auto;
            color: #fff;
        }

在移动端开发的时候，可能会还有添加，修改等按钮，这里就可以直接复用public里面这里的代码了

 伪元素小图标

这个具体看项目中有无使用，有的话通常来说都是多个的。

     <div class="header">
        <div>xxxx</div>
     </div>
      .header{
            position: relative;
            margin-top: 10px;
        }
        .header div:nth-child(1){
            padding-left: 10px;
        }
        .header div:nth-child(1)::before{
           position: absolute;
           content: '';
           top: 0;
           left: 0;
           width: 3px;
           height: 100%;
           background: linear-gradient(to bottom,#7bdfa8,#a2f192);
           border-radius: 10px 10px 0 0;
        }

目前就想到这些，后续想起来继续补充。end