css样式H5开发点注意

原创已于 2025-03-07 11:19:12 修改 · 309 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端

收录于

于 2025-01-14 18:50:54 首次发布

样式限制使用记录
1、align-items center可以用，end不行
justify-content: end;
/* ---- 改成下面的写法 ---- */
justify-content: flex-end;

2、align-self top不能用华为有的手机不适配
size是24的有文字icon的行高至少给30

3、display:flex;gap:16rpx; ios gap失效

4、渐变字体样式需要给省略号给个颜色

<div class="text-nick-name text-hidden":text="我们都是好孩子">我们都是好孩子"</div>

                .text-nick-name {
                  position: relative;
                  font-weight: 400;
                  font-size: 0.25rem;
                  color: #FF7B3A;
                  &::before {
                    content: attr(text);
                    position: absolute;
                    left: 0;
                    right: 0;
                    -webkit-text-stroke: initial;
                    color: transparent;
                    -webkit-text-stroke: initial;
                    background: linear-gradient(to bottom,  #FFF728, #FF7B3A 80%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    color: #FF7B3A;
                  }
                }

5、用路径参数就可以避免查询参数会出现俩问号的情况


path: '/user/:id',
router.push({ path: `/user/123` });
router.push({ name: 'user', params: { id: '123' } });
const route = useRoute();console.log(route.params.id);