移动端css问题

昨夜小楼东风

已于 2023-04-07 14:56:05 修改

阅读量454

点赞数 1

分类专栏：前端文章标签： css css3

于 2022-11-10 11:42:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_37645543/article/details/127785831

版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文总结了CSS中实现文本溢出省略、隐藏滚动条、动画效果、布局方式等关键技巧，包括line-clamp属性、动画填充模式、flex布局和grid布局的运用，以及针对不同设备和浏览器的适配策略，旨在提升网页的视觉效果和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

段落3行，超出后三个点

font-size: 13px;
line-height: 18px;
color: #7C7E86;
//核心部分
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;

在这里插入图片描述

一行文字，超过4个字就显示…

width: 7rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block

隐藏滚动条样式，但是可以滚动

body::-webkit-scrollbar {
    display: none;
}

关于动画

animation-fill-mode : forwards //设置对象状态为动画结束时的状态（可以防止抖动）
transform-origin: 50% 50%;//可以设置旋转动画的圆心
animation: turnAround 3s linear infinite;//动画名称 时间 线性(默认不是线性) 循环次数

//注意，如果主样式里设置了transfrom属性，keyframes也设置了transfrom属性，则会备覆盖
@keyframes turnAround {
0%{}
100%{}
}

space-around

display:flex;
justify-content:space-around/space-between

区别：
space-between 最左、最右item贴合左侧或右侧边框,item与item之间间距相等。
space-around 每个item 左右方向的margin相等。两个item中间的间距会比较大

线性透明渐变效果

在这里插入图片描述

background: linear-gradient(
        to right,
        rgba($color: #000963, $alpha: 0.5) 80%,
        transparent
      );

p标签设置overflow：hidden后会往上偏一点：

.name {
    color: #fffeb0;
    display: inline-block;
    max-width: 75px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: bottom;//解决往上偏的问题
  }

img进来时src为空，后面src有数据了但是大小撑不起来（设置了大小也不管用）

//在设置大小的基础上设置 display: block;
width: 97px;
height: 97px;
border: 2px solid #57aeff;
border-radius: 50%;
z-index: 2;
display: block;

小米手机padding失效
设置display：flex后，align-item：end部分机型失效

取消IOS长按保存

user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

css隐藏滚动条

https://blog.youkuaiyun.com/u010227042/article/details/125324439

scrollbar-width: none;（仅限firefox）
-ms-overflow-style: none;（仅限IE 10+）
.element::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

移动端input会有阴影

-webkit-appearance: none;

scroll卡顿（iphone 8）

-webkit-overflow-scrolling: touch; //使用硬件加速，就好使了

参考：scroll问题

瀑布流布局
1、缺点：适用于数量固定的需求。如果数据有加载更多需求，那所有数据会重新排布一次。
其实是左右分布，第一列全部占满后才开始向第二列分布，看起来数据是乱的
column-count: 2;
column-gap: 1.867vw; //0px;
2.缺点：不能紧跟上面最低的元素
float：left
display：bolck

grid布局
display: grid;
grid-column-gap: 10px;
grid-row-gap: 8px;
grid-template-columns: auto auto;