最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 移动端常用的css代码段

    正文概述 掘金(花旗蜕变)   2021-01-27   396

    移动端常用的 css 代码段

    1.水平居中

    .inner {
      text-align: center;
    }
    .inner {
      margin: 0 auto;
    }
    .parent {
      display: flex;
      justify-content: center;
    }
    

    2.垂直水平居中

    /*1个子元素*/
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /**/
    .parent {
      position: relative;
    }
    .inner {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
    /**/
    .parent {
      position: relative;
    }
    .inner {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
    

    3.文字描边(小程序||H5 都适用)

    移动端常用的css代码段

    <div class="success_text" data-text="恭喜获得一等奖">恭喜获得一等奖</div>
    
        .success_text {
            width: 100%;
            letter-spacing: 1px;
            line-height: 50px;
            background-color: #000;
            position: relative;
            z-index: 0;
            font-weight: bold;
            text-align: center;
            font-size: 29px;
            color: #fff;
        }
        .success_text::before {
            width: 100%;
            content: attr(data-text);
            letter-spacing: 1px;
            -webkit-text-stroke: 6px#00a33e;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }
    

    4.flex 简单列表(我的记录)

    移动端常用的css代码段

    <div class="record">
      <ul class="ul_head">
        <li class="li_head">上传编号</li>
        <li class="li_head">上传时间</li>
        <li class="li_head">中奖情况</li>
        <li class="li_head">审核结果</li>
      </ul>
      <div class="record_item">
        <ul class="ul">
          <li class="li_item">
            <div class="div_item">9527</div>
            <div class="div_item">2020-01-20 20:00:00</div>
            <div class="div_item">戴森吹分机戴森吹分机戴森吹分机</div>
            <div class="div_item">审核通过</div>
          </li>
          <li class="li_item">
            <div class="div_item">9527952795</div>
            <div class="div_item">2020-01-20 20:00:00</div>
            <div class="div_item">未中奖</div>
            <div class="div_item">待审核</div>
          </li>
        </ul>
      </div>
    </div>
    
    .record {
      width: 90%;
      height: 4.8rem;
      color: #000;
      margin: 0 auto;
    }
    
    .record .ul_head {
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 1;
      font-size: 0.24rem;
    }
    
    .record .ul_head .li_head {
      text-align: center;
      width: 25%;
      font-size: 0.24rem;
      font-weight: bold;
    }
    
    .record .record_item {
      width: 100%;
      margin: 0 auto;
      height: 5.2rem;
      position: relative;
      margin-top: 0.2rem;
      padding-right: 0.1rem;
    }
    
    .record .record_item .ul {
      width: 100%;
    }
    
    .record .record_item .li_item {
      width: 100%;
      height: fit-content;
      margin-top: 0.16rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.2rem;
    }
    
    .record .record_item .li_item .div_item {
      width: 24%;
      height: 100%;
      text-align: center;
      word-break: break-all;
    }
    

    5.英文、中文强制换行与不换行

    /* 强制不换行,都起作用 最常用  */
    .p {
      white-space: nowrap !important;
    }
    
    /*  只对英文起作用,以字母作为换行依据 */
    .p {
      word-break: break-all;
    }
    
    /* 只对英文起作用,以单词作为换行依据  */
    .p {
      word-wrap: break-word;
    }
    
    /* 只对中文起作用,强制换行  */
    .p {
      white-space: pre-wrap;
    }
    

    6.文本超出...

    /* 不换行,只显示一行,超出显示...  */
    .p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* 换行超出显示... ,只显示2行  */
    .p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /*显示的行数*/
      -webkit-line-clamp: 2;
    }
    

    7.禁止滚动传播

    可以滚动的H5中,有个弹框内容可以滚动,弹框滚动完后,背景添加样式contain即可阻止滚动传播

    .div {
      overscroll-behavior: contain;
    }
    

    8.禁止字体调整

    旋转屏幕可能会改变字体大小,声明 text-size-adjust:100%让字体大小保持不变

    * {
      text-size-adjust: 100%;
    }
    

    9.禁止高亮显示

    触摸元素会出现半透明灰色遮罩

    * {
      -webkit-tap-highlight-color: transparent;
    }
    

    10.禁止动画闪屏

    在移动设备上添加动画,有时会出现闪屏,给父元素添加3D 环境就能让动画稳定运行

    .elem {
      perspective: 1000;
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }
    

    11.美化滚动占位

    滚动条样式太丑希望自定义,::-webkit-scrollbar-*来帮你。记住以下三个关键词就能随机应变了

    ::-webkit-scrollbar:滚动条整体部分 ::-webkit-scrollbar-track:滚动条轨道部分 ::-webkit-scrollbar-thumb:滚动条滑块部分

    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: transparent;
    }
    ::-webkit-scrollbar-track {
      background-color: transparent;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-image: linear-gradient(135deg, #09f, #3c9);
    }
    

    12.开启硬件加速

    想动画更流畅吗,开启 GPU 硬件加速

    .div {
      transform: translate3d(0, 0, 0);
      /* transform: translateZ(0); */
    }
    

    13.描绘 1 像素边框

    .div {
      position: relative;
      width: 200px;
      height: 80px;
      &::after {
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid #f66;
        width: 200%;
        height: 200%;
        content: "";
        transform: scale(0.5);
        transform-origin: left top;
      }
    }
    

    起源地 » 移动端常用的css代码段

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元