跳到主要内容

应用-常用技巧

修改边框和光标颜色​

input {
    caret-color: $yourColor;
    outline-color: $yourColor;
}

平滑滚动​

.scrollDom {
    scroll-behavier: smooth;
}

自适应背景​

用rem布局声明一个元素背景, 多数情况会把background声明为cover. 此时将background-size声明为100% 100%可以让背景随着宽高的变化而变化

.elem {
    width: 1rem;
    height: 1rem;
    background: url("pig.jpg") no-repeat center/100% 100%;
}

监听屏幕旋转​

用CSS直接监听屏幕旋转:

/* 横屏 */
@media all and (orientation: landscape) {
    /* 自定义样式 */
}
/* 竖屏 */
@media all and (orientation: portrait) {
    /* 自定义样式 */
}

支持弹性滚动​

在苹果系统上非body元素的滚动操作可能会存在卡顿, 但是安卓不会出现该情况. 通过声明touch可以优化流畅度:

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

禁止滚动传播​

移动端的浏览器有一个不同于桌面端浏览器的行为: 当浏览器包含多个滚动区域的时候, 滚完一个区域后如果还存在滚动动量, 会将这些剩余动量传播到下一个滚动区域, 造成滚动转播.

可以通过下面的CSS禁止:

.elem {
    overscroll-behavior: contain;
}

防止屏幕滚动​

100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度:

body {
    padding-right: calc(100vw - 100%);
}

禁止长按操作​

有时候不想让用户长按元素呼出菜单, 可以这么写:

* {
    /* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
    user-select: none; /* 禁止长按选择文字 */
    -webkit-touch-callout: none;
}

但是声明user-select: none会唱input和textarea无法输入文本, 所以需要排除:

input,
textarea {
    user-select: auto;
}

禁止字体调整​

旋转屏幕可能会改变字体的大小, 声明text-size-adjust:100%可以消除这种行为:

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

禁止高亮显示​

触摸元素会出现半透明灰色遮罩, 可以去掉:

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

禁止动画闪烁​

在移动设备上添加动画, 多数情况会出现闪屏, 给动画元素的父元素构造一个3d环境就能让动画稳定运行了

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

自定义表单外观​

button,
input,
select,
textarea {
    appearance: none;
    /* 自定义样式 */
}

美化表单外观​

::-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);
}

美化输入占位​

input::-webkit-input-placeholder {
    color: #66f;
}

对齐输入占位​

input {
    line-height: normal;
}

对齐下拉选项​

select option {
    direction: rtl;
}

修复点击无效​

在苹果系统上有些情况下非可点击元素监听click事件可能会无效, 针对该情况只需要对不触发click事件的元素声明cursor: pointer就可以解决了

.elem {
    cursor: pointer;
}

识别文本换行​

多数情况会使用JS换行文本, 那不太优雅, 如果返回字段包含\n或者<br>可以用下面的换行处理:

* {
    white-space: pre-line;
}

开启硬件加速​

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

控制溢出文本​

.elem {
    width: 400px;
    line-height: 30px;
    font-size: 20px;
    &.sl-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &.ml-ellipsis {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

载入新内容时的scroll位置​

在移动端会有加载更多的功能, 有时候浏览器的处理方式可能不如预期

可以使用overflow-anchor来调整相应的行为.

它提供一种退出浏览器滚动铆钉行为的方法, 该行为会为调整滚动位置以最大程度的减少内容偏移

/* Keyword values */
overflow-anchor: auto;
overflow-anchor: none;

/* Global values */
overflow-anchor: inherit;
overflow-anchor: initial;
overflow-anchor: unset;

全屏滑动​

可以使用scroll-snap相关的属性来方便的设置全屏滚动的效果, 除了兼容性没有其他太大的问题.

比如scroll-snap-type:

.scroll {
    scroll-snap-type: x mandatory;
}

参考这里

字体的平滑​

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

可以设定字体的反锯齿方式

使用not选择器​

使最后一个样式不生效

li:not(:last-child){
  border-bottom: 1px solid #ebedf0;
}

改变光标颜色​

caret-color可以修改光标的颜色

.caret-color {
  caret-color: #ffd476;
}

移除type=number尾部的小箭头(webkit)​

.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

IOS滚动条卡顿​

body,html{   
  -webkit-overflow-scrolling: touch;
}

参考链接​