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

最新推荐文章于 2024-09-23 18:23:49 发布

awba4090

最新推荐文章于 2024-09-23 18:23:49 发布

阅读量924

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/zxk5211/p/web_20.html

版权

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兼容代码不断更新和优化中...

转载于:https://www.cnblogs.com/zxk5211/p/web_20.html