当前位置：首页 > news >正文

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

news 来源：原创 2025/5/9 10:58:37

在开发移动端项目的时候，很多样式都是相同的，比如说图标大小，头像大小，页面底部保存(添加按钮），项目主体颜色等等，对于这些在项目中常用到的，通常都会写在公共样式中（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;}