移动端&PC端CSS样式兼容代码

Posted 2022-12-05 zxk5211

CSS样式兼容代码

1.禁止选中复制文本

*
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

2.单行文本溢出显示省略号…

p 
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    white-space: nowrap;

3.flex布局兼容

#app 
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;

4.iOS app滑动卡顿

.content div 
    /* 解决ios页面滑动卡顿 */
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    overflow-y: auto;
    /* overflow-y: scroll; */

5.渐变背景颜色

.box 
    width: 400px;
    height: 400px;
    background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%);

6.去除PC端浏览器右侧滚动条

html 
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none;


html::-webkit-scrollbar 
    width: 0 !important;

注 ：css兼容代码不断更新和优化中...